Icon fonts are webfonts containing symbols and glyphs, instead of letters or numbers. You can customize these scalable vector icons with CSS in the same way you customize regular text which has made them a popular choice on the web.

Sub-Zero uses two sets of third-party icon fonts for your convenience – Icon-Works and Font Awesome. Both are completely free either for personal or commercial use.

Icon-Works is used specifically in these sections of the HTML files:

• Services – .services class
• Process – .process class
• About Me – .about-me class
• Portfolio Details – .portfolio-details class

Font Awesome is used with these classes in the main.js file for chevron arrows:

• Services Slider – .services-arrow-prev and .services-arrow-next classes
• Quote Slider – .quote-arrow-prev and .quote-arrow-next classes
• Portfolio Slider – .portfolio-arrow-prev and .portfolio-arrow-next classes

Additionally, Font Awesome is used for all other icons.

Changing and Adding Icon-Works

This webfont has already been embedded in the icon-works.css file and imported into the style.css file. However, you will need a list of the icons if you wish to change or add new ones.

For further information, please follow the instructions at Icon-Works.

We have already completed steps 1-2 of the instructions for you. All you will need to do is download the file to get the list of icons and perform step 3 of the instructions.

Changing and Adding Font Awesome

Font Awesome has already been embedded in the font-awesome.css file.

Here is the code which you need to modify to change or add an icon:

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

Sub-Zero uses Font Awesome for the icons in buttons. If you need more information on the list of available icons and class names, open the font-awesome.min.css file and look through the list of class names.

To learn more, please refer to the Font Awesome Cheatsheet.

Adding an Icon in a Button

Sub-Zero has button styles that allow you to add an icon to the left or right of the text in a button by adding the class name in the index.html file.

Here is the code which you need to modify to add an icon to the left of the text:

<a href="#youremail" class="button border-dark">
    <i class="fa fa-envelope icon-left">Email Us</i>
</a>

Here is the code which you need to modify to add an icon to the right of the text:

<a href="#youremail" class="button border-dark">
    <i class="fa fa-envelope icon-right">Email Us</i>
</a>

Styling Font Awesome Icons

To style Font Awesome icons, we have provided three pre-configured options:

To use these styles, simply add the class name into the HTML code.

Here is the code which you need to modify to style an icon:

<a href="http://twitter.com"><i class="fa fa-twitter medium-icon"></i></a>