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.

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

li.iconCheckmark:before{
    @include icon("\e095", 16px, 1);
    margin-right: 5px;
}

Example of an icon placed before an element

li.iconCheckmark:before{
    font: 16px/1 "RockSolid Icons";
    content: "\e095";
    display: inline-block;
    position: relative;
    margin-right: 5px;
}