This tutorial will show you how to use icon font on your website. We will use Font Awesome as example. The file size of the font is a bit larger. If you only use several of them, you may like to try an online font generator to extract only needed characters like "fontello.com".
Go to this site http://fontawesome.io and download the font files. A zip file with the name "font-awesome-<version>.zip" will be downloaded.
Extract the zip file to a directory on your computer.
Open a website that you want to use this icon font.
Drag or copy these 4 font files "fontawesome-webfont.eot", "fontawesome-webfont.ttf", "fontawesome-webfont.woff" and "fontawesome-webfont.woff2" to the Website Explorer. We create a directory "fonts" and drop these four files to it.
After adding this font, a font family "FontAwesome, serif" will be added.
We are going to create a new style to use this font. Select "Tools" > "CSS Style Editor" from the main menu or press this button on the toolbar.
Create a new style by clicking on the "Add" button on the right. Then rename it to "fontawesome" by clicking on the "Rename" button or pressing the "F2" key.
Click on the "Text" tab on the left and set the values as shown below.
Click on the OK button to save the new style.
We are going to demonstrate how to use it. Open a page and insert a text element on the page by selecting "Insert" > "Text" from the main menu or clicking on this button on the toolbar.
Double-click on the text element to open it in the Text Element Editor.
Open a web browser and go to this URL "http://fontawesome.io/cheatsheet/".
Choose an icon from the page. We choose "fa-bar-chart" as example. Select the icon and right-click on it to bring up the context menu. Select "Copy".
Go back to the Text Element Editor and paste the icon on the editor.
After pasting, the character is not visible. Select it.
Select "fontawesome" from the drop down menu.
Now the icon can be seen after applying the style.
on the toolbar.
on the toolbar.
