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:
Download the file here –
Or go to there page and download it from there –
Extract the Zip File
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
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.
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:
And it should look like this:
How To Edit The Icon Fonts:
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=”!”></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