How to Add Icons to Your Custom Website Pages

Lets start by creating your custom page. If you already have a page created, that works as well. For this example we will use a new custom page to make things simple.

icon_tutorial

Make sure your editor is in the code view instead of the text view. You can switch between these views by clicking the code icon in your text editor tool bar.

icon_tutorial2

Go ahead and add the icon code snippet below to your text editor. You should be able to preview the icon when you switch back to the text view. In this example, we’re using the alarm icon.

 <i class="alarm icon"></i>

icon_tutorial3

You can refer to the Semantic UI site here to view all the icons available for use. The icon name is under each icon.

icon_tutorial6

icon_tutorial5

NOTE: The text has to be lower-cased.

You can now copy and paste to duplicate your icons. All you need to do is just replace the class name and you are good to go.