Icon Fonts

Updated on 16 Oct 2021

Fonts

Most people should be used to using typeface fonts such as Arial, Times New Roman or the modern one used on Windows, Calibri. What you can do now is use fonts that have icons instead.

For example I could use this in my text to display resize arrows. If I were writing this in HTML, it would be written like this…

<p>
    For example I could use this <span class="ti-arrows-horizontal"></span> in my text to display resize arrows.
</p>

In fact I can replace ti-arrows-horizontal with any of the icons found on the themify website.

Icon Sets

In the previous example I used the themify icon set. You can download it and use it for your website so that you can have a consistent look and feel of icons similar to what I have on my website. The instructions are in the readme.txt file and it is very straight-forward.

=====================================
HOW TO USE IT:

1) Upload the ‘themify-icons.css’ file and ‘fonts’ folder to your server

2) Add the CSS file into the <head> section of your site:
<link href="http://yoursite.com/themify-icons.css" rel="stylesheet">

3) Add the icon markup in your page:
<span class="ti-download"></span>

All icons can be viewed at: http://themify.me/themify-icons

Themify is not the only icon set available, so make sure you check out these popular choices as well.

One website that I find very useful is IconFinder. This allows you to search across many sets for the specify icon that you want.

For example my website has a section for Jenkins, and it uses the Jenkins logo on my main Notes page.

Building your own Icon Set

So I use IconFinder to find a suitable icon (svg) that I can use for Jenkins on my website.

I’ve found it, downloaded it and need to use it as part of my own Icon set.

Next I go to IcoMoon and use the IcoMoon App.

Next I click on Import Icons and select the Jenkins SVG file that I downloaded from IconFinder earlier. I can add a few more icons, change the name of my Untitled Set or adjust various other properties.

Make sure you select the icons you want and click on button at the bottom of the page titled Generate Font.

Now you have the option of changing the reference name of your Icon(s) before downloading it, but for this demonstration I’ll just keep with the name given.

Download

When you download your icon set, you will get several files and a demo page that shows your icons in use on a webpage. Below is a quick view of the demo page, and I can see a Jenkins icon available.

Using your own Icon Set

After you’ve downloaded your icon set, you’ll need to copy the fonts directory and styles.css file over to your website.

Now that I have copied the necessary files to my own brent-icon directory, I can use my icons like I have in the example below.

<!doctype html>
<html lang="en">
  <head>
    <title>Icon Example</title>

    <link href="brent-icon/style.css" rel="stylesheet">

    <style>
        .icon {
            font-size: 48px;
        }
    </style>
  </head>
  <body>
    

    <h1>Example use of custom icon</h1>
    <span class="icon icon-iconfinder_jenkins"></span>
    <p>Some text</p>
      
  </body>
</html>

You will find a demo.html file in the download that will show you how to use the icon set, and a Read Me.txt that will also have some instructions (hint: it is pretty much the same as the instuctions for Themify). I.e. copy styles.css and fonts folder to your location and link the stylesheet in your page like I have done in the example.