How to use the icon font

Every RockSolid Theme includes an exclusive icon font. The folder iconfont contains 4 font files in the formats TTF, EOT, WOFF and SVG, plus a HTML files that shows an overview of all available icons.

Your download package contains a clearly arranged overview of all available icons. You can use the index to get the code of the icons you want to use it in your content or CSS. The icons of content elements that are prepared out of the box can be changed with one click directly from the back-end.

HTML: Insert icons into text and HTML

To add a icon to any desired HTML element you can use the All you have to do to add an icon to any desired HTML element is to use the data-icon attribute. You can find the corresponding code for the icon you want to use in the included icon index file.

Example: Assign an icon to a list element

<li data-icon="&#xe095;">Lorem Ipsum</li>

CSS: Insert icons via CSS

To insert an icon using CSS you can use the :before and :after pseudo-elements to add the icon prior or next to the particular element.

The Sass/SCSS styles come with a mixin to insert icons

    @include icon("\e095", 16px, 1);
    margin-right: 5px;

Example of an icon placed before an element

    font: 16px/1 "RockSolid Icons";
    content: "\e095";
    display: inline-block;
    position: relative;
    margin-right: 5px;

FAQ: Common questions

Why doesn't the Internet Explorer display the icons?

You are probably working on a system with modified security settings, that restrict the download of font files. You can change the setting in the internet options under SecurityInternetCustom levelDownload and reactivate the Font download or by setting the security level back to default. Please note: This isn't a standard setting and will only affect users who changed their security settings.

I've changed the name of the theme folder, now the icons aren't showing up anymore?

If you've changed the name of the theme folder you also need to modify the paths in the CSS or Sass files (depending on what you use). You can find the default stylesheet main.css in the folder /files/THEMENAME/css/main.css.

While editing in the HTML source view all icons are shown as ▢

Contao converts the icon codes into UTF-8 characters, that are shown as squares or question marks in the source code view. The icons should show up just fine in the frontend.

Did you have difficulties following this instructions or did you spot a mistake? Please let us know by providing your feedback. Thank you!