Skip to main content

Style with icon fonts

This page applies to:MindTouch Responsive

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


How do I use icon fonts in MindTouch Responsive?

In MindTouch Responsive we use an icon font based on the open source IcoMoon pack with several additional custom icons. The icon font comes with your site, so you can use it at any time. There are a couple ways to use icon fonts in your customizations: class name and CSS style.

Class name

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.

For 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="" title="Twitter feed">Twitter</a>



​CSS style

To change the icon of a MindTouch-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.

  1. Right-click the element icon you wish to change and select Inspect Element.


  1. Select the :before pseudo class used for that element. In this case, the <span> tag with the class .mt-icon-article-howto.


  1. On the right, under the Styles tab, note the CSS selector used for this icon.
  2. Copy mt-icon-article-howto:before to overwrite this style.


  1. Navigate to the control panel.
  2. In the Custom CSS field, add the following CSS rule set:
// Updated glyph code for map icon
.mt-icon-article-howto:before {
    content: '\e826';
  1. 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 backwards slash (e.g. '\e826').


New how-to icon

  NOTE:  You can always create your own class names to assign icons, 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, please see our article on available icons. If you would like to work with the icon font, you can download the MindTouch icon font demo. To view the list of icons, extract the files from this zip. In the extracted folder, find then open demo.html in a browser. You will see a grid of all available icons. When using the glyph codes in a CSS rule set, don't forget about the backward slash in the declaration.

  • Was this article helpful?