Font Icons

The WEM runtime has built-in support for Font Awesome 4 and Glyphicons, which are available in Bootstrap v3.

In the Page Editor of the Modeler, you can choose any of the available icons.

Example HTML for Font Awesome Icon

<i class="fa fa-plus"></i>

Example HTML for a Glyphicon

<i class="glyphicon glyphicon-refresh"></i>

You may also want to include your own custom icon set in the design template.

Custom Font Icon Sets

It is possible to include your own font icon sets in a design template. However, since the icon sets and their class names are predetermined, you cannot simply add the fonts and stylesheets to your design template. In the Modeler, you can only select from Font Awesome 4 and Glyphicons. To make your custom font icon set work, you need to map and override certain Font Awesome 4 class names with your custom font icon set class names.

Boxicons Example

Let's assume you want to use Boxicons instead of Font Awesome v4. Boxicons use bx as their base CSS selector, with a second class name like bx-align-left for the icon selector. Rendering an icon with Boxicons is fortunately very similar to how the WEM runtime does it, as shown below:

<i class="bx bx-align-left"></i>

However, the WEM runtime does not output the Boxicons classes; it uses Font Awesome or Glyphicon classes instead. Therefore, if you want to replace the Font Awesome icons, you need to substitute those classes with the ones from your custom font icon set. The CSS would look something like this:

/* .bx */
.fa {
    font-family: boxicons !important;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    display: inline-block;
    text-transform: none;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* .bx-align-left */
.fa-align-left:before {
    content: "\e9a8";
}

/* .bx-cart */
.fa-shopping-cart:before {
    content: "\ea36";
}

/* .bx-user */
.fa-user:before {
    content: "\ec63";
}

/* etc. */

In this example, we have taken the original properties from the Boxicons CSS file and renamed them to use the Font Awesome classes instead.