Elegant Icon Font Tutorial

Elegant Icon Font Tutorial

Elegant Themes has done it again. They just released some of the best, most beautiful, & elegant icon font set on the web. And best of all, they are completely free, stored in a font file, and vector based, so you can shrink or enlarge without any loss of quality. These fonts can be used in multiples of 16px (so 16px, 32px, 64px, etc.) We created this step by step tutorial because it seemed as though there were many people having trouble implementing these icon fonts into their site. Please note: These icons are dual licensed under the GPL 2.0 and MIT, and are completely free to use.

Steps To Install The Elegant Font Icons:


Step 1

Download the file here –


Or go to there page and download it from there –



Step 2

Extract the Zip File


Step 3

Upload the folder called “fonts” to your Theme Directory

This is usually – /public_html/wp-content/themes/””your theme””

So you would navigate to “”your theme”” and upload the “fonts” folder into that directory


Step 4

Open the stlyes.css file (you can use notepad) that is in the HTML CSS folder you downloaded and copy it to your styles.css file at the end, or you can paste it to the custom css box in your e-panel

You can also copy the code from this file –


Make sure to copy all of it, and paste it into either your style.css file or your custom css box.


Step 5

Now you can use these in your site, open the post, page, widget, or area you want to insert these into..

Use the following code to insert them into your content:

<span data-icon=”&#x21;”></span>
And it should look like this:


How To Edit The Icon Fonts:


Step 1

We are going to use inline code to edit the icon fonts to your desired effect..

p = style

font size = 32px

color = #000

<p style=”font-size: 32px; color: #000;”><span data-icon=”&#x21;”></span></p>
Which will look like this:

You can edit the fonts however you see fit..

We hope this helped you to install the Elegant Icon Fonts onto your site and helped you make the edits you wanted…

If you found this helpful please share on your favorite Social Media Platform

Clip to Evernote


  1. Great knowledge you have shared with us.
    I would discuss about this posting along with my close-fellows so that they also can be interacted on this.
    Hope you kindly will be posting ever.

  2. Thanks Alon! This helped a lot. I don’t know why ET’s instructions weren’t more clear. Your steps made it extremely easy. Thanks!

  3. These steps like the ones on the elegant themes website don’t work. I would be grateful if you would help me out.i use the woothemes framework.
    Eric Amaefule recently posted…Hello world!My Profile

  4. You should have included the end result of the steps you’ve listed, in image or something.

  5. Great share ! This is so helpful. I don’t know why ET’s instructions weren’t more clear. Your steps made it extremely easy. Thanks!
    Phong recently posted…[Vector] Sea photo frameMy Profile

  6. I have enjoyed using ElegantFonts inside the Mentor theme I bought from OceanThemes. But I went live yesterday and it stopped working, presumably due to url redirect.

    So I installed manually using this tutorial (thanks!) but no joy. I added the /fonts folder to both /mentor and /mentor-child folders.

    When I access the site for development using url deborahpreuss .com slash abiggergametoday
    it works fine. But when I use the real url (provided with this post) the font is broken.

    I go live tomorrow! Help!
    Deborah recently posted…Open Space is not MagicMy Profile

Submit a Comment

Your email address will not be published. Required fields are marked *

CommentLuv badge
This blog uses premium CommentLuv which allows you to put your keywords with your name if you have had 1 approved comments. Use your real name and then @ your keywords (maximum of 3)

Pin It on Pinterest

Share This