В Joomla можно напихать сотни предустановленных иконок с помощью Icomoon Fonts

Не знал про псевдостили, здесь конспект моих открытий. Оказалось, что можно обращаться к иконкам, как к шрифтам, менять размеры и цвета. В Джумле эти возможности встроены.

Joomla Standard Icomoon Fonts - Since Joomla 3.0.0, the Joomla! CMS comes with its own custom Icomoon Font Set. These icon fonts are available by default for use in the "Protostar" (Frontend), "Isis" (Administrator) and "Hathor" (Administrator) Templates.
IcoMoon App
Icons Tutorial w3schools.com

Далее все очень кратко, но понятно (надеюсь)

Icon fonts can be called with a tag and a {space}. eg

In [ ]:

<span class="icon-joomla large-icon"> </span>

Because the icons are fonts, you can control the size of them with an added class or style= statement. Of course you will have to define the class in your .css or .less stylesheet file.

In [ ]:

<span class="icon-joomla large-icon"> </span>
<span class="icon-joomla" style="font-size:24px;"> </span>

To include the Icomoon fonts in your template you will have to add the css stylesheet (/media/jui/css/icomoon.css) or include it in your .less file when you generate the .css stylesheet(s).

In [ ]:

$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css');

Достаточно просто добавить (поменять стиль)¶

Ниже пример того, как я заменил стрелку (icon-chevron-right) на скрепку (icon-paperclip). Просто заменил имя класса в теге span class="icon-paperclip"

In [ ]:

<p class="readmore">
 <a class="btn" 
    href="/jm_34_trado/index.php/2015-11-05-18-11-37/2015-11-05-18-08-45/2015-11-05-18-16-15/2-2015-11-05-17-00-05" 
    itemprop="url">
  <span class="icon-paperclip"></span>
  Подробнее... </a>
</p>

In [ ]:

.icon-attachment:before, .icon-paperclip:before, .icon-flag-2:before {
    content: "r";
}
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "IcoMoon";
    font-style: normal;
}

И цвет псевдокартинки тоже можно поменять очено просто, (см. ниже) color: #62A5B7;

In [ ]:

.btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0px;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75);
    background-color: #F5F5F5;
    background-image: linear-gradient(to bottom, #FFF, #E6E6E6);
    background-repeat: repeat-x;
    border-width: 1px;
    border-style: solid;
    border-color: #BBB #BBB #A2A2A2;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    border-radius: 4px;
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);
    color: #62A5B7;
}

Посты чуть ниже также могут вас заинтересовать