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

Оф. сайт проекта Icomoon >> icomoon.io

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

Например:

font-size:32px;
color:#333;

Классы для значков шрифта задаются в css-файле media/jui/icomoon.css и выглядит это так:

.icon-joomla:before {
 content: "\e200";
}

То есть, чтобы добавить символ Joomla на страницу мы добавляем тэг i с нужным классом:

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

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

С помощью content внутри тэга i добавляется символ с определенным кодом из шрифта IcoMoon

Как это работает

Сам шрифт назначается для добавляемого символа так:

[class^="icon-"]:before,
[class*=" icon-"]:before {
 font-family: &#39;IcoMoon&#39;;
 font-style: normal;
 speak: none;
}

Также задается по умолчанию тип блока и размер символа:

[class^="icon-"],
[class*=" icon-"] {
 display: inline-block;
 width: 14px;
 height: 14px;
 *margin-right: .3em;
 line-height: 14px;
}

Шрифт IcoMoon создается с помощью font-face:

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

А файлы со шрифтом IcoMoon, как видно из кода выше, находятся в папке medi/jui/fonts

Эти данные я привел для справки, при использовании шрифта IcoMoon на сайте достаточно будет просто подключить css-файл icomoon.css и затем добавлять символы можно будет с помощью тэга i

Можно использовать и тэг span , но при его использовании у меня лично появляются какие-то постороннии штрихи при выводе символа.

 

Чтобы сделать комментарий, нужно авторизоваться на сайте!