Style with icon fonts

Last updated
Save as PDF

Applies to:: All MindTouch Versions
Role required:: Admin

Icon fonts (vector-based images instead of text characters) are used in responsive layouts because they scale without distortion, can be styled with CSS, and load faster than images.

By default, Expert includes an icon font based on the open source IcoMoon pack with several additional custom icons. You can enable icon fonts in your customizations using class names and CSS.

Class names

If you are creating your own content and would like to apply an icon to an element, just add one of the pre-defined class names to it. Any class name that starts with .mt-icon will automatically generate a :before pseudo-element with the proper icon font CSS.

Example

If you want a link to your site's Twitter feed in your custom footer, add the .mt-icon-twitter class to it and a Twitter icon will appear.

<a class="mt-icon-twitter" href="https://twitter.com/MindTouch" title="Twitter feed">Twitter</a>

Twitter

CSS

To change the icon of an Expert-generated element, it is best to overwrite the style in the control panel. To do this, find the class names associated with this element via the development tools plugin that comes with your current browser. This example uses Chrome to change the icon used for how-to articles.

Right-click the element icon you wish to change and select Inspect Element.
Select the :before pseudo class used for that element. In this case, the <span> tag with the class .mt-icon-article-howto.
On the right, under the Styles tab, note the CSS selector used for this icon.
Copy mt-icon-article-howto:before to overwrite this style.
Navigate to the control panel.
In the Custom CSS field, add the following CSS rule set:

// Updated glyph code for map icon
.mt-icon-article-howto:before {
    content: '\e826';
}

Once you've created the rule set, modify the content declaration value to use the new icon's unicode glyph. The unicode glyph can be found in the quotation marks proceeded by a backward slash (for example '\e826').

Example

New how-to icon

You can always create your own class names to assign icons to, just be sure to start them with .mt-icon- so that the icon font styles are applied.

Available icons

For a full list of available icons and their unicode glyph codes, see available icons. When using the glyph codes in a CSS rule set, be sure to include the backward slash in the declaration.