Customizing Icon Fonts in Genesis

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.

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

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

  • About
  • Process
  • Portfolio

IcoMoon is used for all other icons.

Adding IcoMoon Icons

IcoMoon has already been imported into the style.css file. You may place up to five IcoMoon icons in the navigation bar. However, if you wish to add more than five icons, you will have to make some changes in the style.css file to modify the navigation bar’s fixed width sizes.

To add a new IcoMoon icon, follow these instructions:

  1. Open the style.css file in your code editor.
  2. Search for the following class: icons
  3. Identify the icon class name you want to use. For example, if you want to use the icon for Dribbble, choose the .icon-dribbble class.
  4. Open the index.html file in your code editor.
  5. Add the icon’s class name to the tag where you want to display the icon. For example, if you want to place the Dribbble icon in the navigation bar, search for the “Navigation” section to add the class name.
  6. Save the index.html file and view the changes in your web browser.

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

<li class="link-social">
    <a href="https://www.dribbble.com" class="icon icon-dribbble" target="_blank">
</li>

Changing IcoMoon Icons

To change an existing IcoMoon icon, follow these instructions:

  1. Open the style.css file in your code editor.
  2. Search for the following class: icons
  3. Identify the icon class name you want to use. For example, if you want to use the icon for Flickr, choose the .icon-flickr class.
  4. Open the index.html file in your code editor.
  5. Find the <li> tag of the icon you wish to replace, and add the icon’s class name to the tag where you want to display the icon. For example, if you want to replace the Twitter icon in the navigation bar, search for the “Navigation” section to change the class name.
  6. Save the index.html file and view the changes in your web browser.

Here is the original code before the change is made:

<li class="link-social">
    <a href="https://twitter.com" class="icon icon-twitter" target="_blank">
</li>

Here is the modified code; the Twitter icon is replaced with Flickr instead:

<li class="link-social">
    <a href="https://www.flickr.com" class="icon icon-flickr" target="_blank">
</li>

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.

Styling Icon-Works

To style Icon-Works icons, we have provided several pre-configured options:

Option Class Name
Tiny .icons.tiny
Small .icons.small
Medium Small .icons.medium-small
Medium .icons.medium
Medium Huge .icons.medium-huge
Huge .icons.huge

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