Шаблон Joomla

В Joomla 3 для вставки значков сейчас используется шрифт Icomoon.

Главное преимущество использования этого метода, это возможность задавать размер и цвет значка в css-коде.

Классы для значков шрифта задаются в css-файле media/jui/css/icomoon.css. Файл iconmoons.css можно импортировать в css-файле шаблона:

/* joomla icomoon */
@import url('../../../media/jui/css/icomoon.css');

Загружаем файлы шрифта IcoMoon:

@font-face {
 font-family: 'IcoMoon';
 src: url('../fonts/IcoMoon.eot');
 src: url('../fonts/IcoMoon.eot?#iefix') format('embedded-opentype'),
  url('../fonts/IcoMoon.svg#IcoMoon') format('svg'),
  url('../fonts/IcoMoon.woff') format('woff'),
  url('../fonts/IcoMoon.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}

Это вариант для случая, когда файлы шрифта находятся в папке fonts шаблона.

Так можно подгрузить файлы, которые идут вместе с joomla.  Находятся они в папке media/jui/fonts.

@font-face {
 font-family: 'IcoMoon';
 src: url('../../../media/jui/fonts/IcoMoon.eot');
 src: url('../../../media/jui/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'), url('../../../media/jui/fonts/IcoMoon.woff') format('woff'), url('../../../media/jui/fonts/IcoMoon.ttf') format('truetype'), url('../../../media/jui/fonts/IcoMoon.svg#IcoMoon') format('svg');
 font-weight: normal;
 font-style: normal;
}

Для добавления символа на странице сайта используется тэг i с нужным классом:

<i class="icon-joomla">&nbsp;</i>

Символ пробела -   используем, чтобы тег i не был вырезан виз. редактором - пустые тэги удаляются.

Динамическое добавление символа:

.tag-class:before {
 content: "\e200";
}