> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/wemreference/wmt/font-icons.md).

# Font Icons

The WEM runtime has built-in support for [Font Awesome 4](https://fontawesome.com/v4/icons/) and [Glyphicons](https://getbootstrap.com/docs/3.4/components/), 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

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

### Example HTML for a Glyphicon

```html
<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](https://boxicons.com) 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:

```html
<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:

```css
/* .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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wem.io/platform/wemreference/wmt/font-icons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.