The Elegant Icon Font – 360 Of The Best Free Icons For The Modern Web

We have set out to create the most beautiful, elegant and complete icon font on the web…for free! We have been struggling to find the best icon font to use in our own projects, so we decided to create our own instead. This font will be used in our themes, and we will continue to update the collection to satisfy the needs of our designs. Unlike traditional graphics, these icons are housed within a font file, which means they are vector based and can expand and contract without quality degradation. The result is crisp, beautiful graphics on any display (including Retina displays). Furthermore, these icons have been optimized with pixel-perfect detail for 16px, and all multiples of 16px (32px, 64px, etc). These icons are dual licensed under the GPL 2.0 and MIT, and are completely free to use.

Introducing the Elegant Themes Icon Font

Subscribe To Our Youtube Channel

Download The Icons

Why Icon Fonts Are Awesome

Icon fonts are great because they are flexible and fast loading. Using a single font and CSS, you can create countless graphical variations that would normally require the use of an equally countless collection of bulky and non-scalable images. Combined with HTML elements, these icons can even turn into beautiful buttons like the download link above!

How to Use the Elegant Icon Font on Your Website

Using the Elegant Icon Font on your site is easy, especially if you’re an Elegant Themes member. First, though, will need to upload one of the font files from the download link above into the Divi Builder. Then you can choose the icons from within most Divi modules’ Design tab, or you can use the unicode in your text to insert it the same way you would an ampersand or blank space.

If you’re not a Divi user, we have a tutorial on how to use any font you want on your website without a plugin that will get your site all set up.

Uploading the Elegant Icon Font into the Divi Builder

First of all, download the .ZIP file we linked to above, and unzip it on your computer. Then, find the elegant_font folder and navigate to HTML CSS -> Fonts. Inside that folder, you will find the various font files you can use.

After that, follow these steps to upload the font into the Divi Builder.

Navigate into any module’s Header or Text section under the Design tab.
Click on the Text Font (or Header Font) dropdown
Press the Upload button to bring up the uploader modal
Select any of the font files from the ZIP archive you downloaded
Press the blue Upload button

You will see the font in the Design tab now. Because it is an actual font, the characters correspond to various keyboard buttons, which is why the name of the font that was entered as Elegant Icon Font is made up of various icons in the builder window.

And with that, your new Elegant Icon font is uploaded. If you don’t want to go through the builder, you can always follow our tutorial to add them to your site another way.

Using the Elegant Icon Font

Once you have uploaded the font to your site, you can set the font to any heading or text style that you want. As long as the Design tab has the Elegant Icon Font set, you can feel free to use either the keyboard or unicode characters listed below to display the font you’d like. Remember that you can customize each Heading size, so you could keep H6 in reserve for the Elegant Icon Font and pull it out when needed.

Here is an example of two text modules with the same text, only one has the font set to the site’s default and the other is the Elegant Icon Font.

And because it’s a font, remember that you can size the icon up and down to suit your needs without loss of quality.

Complete Set and Unicode Reference Guide

Below, we have listed a complete reference guide to the Elegant Icon Font, including both CSS classes for individual inclusion and styling and the unicode to use the icons inline as you work. For a more in-depth look at how to use icon fonts within WordPress, Divi, and even offline applications, check out our comprehensive guide.

Complete List Of Class Names

icon_menu

icon_menu-square_alt2

icon_menu-circle_alt2

icon_comment_alt

icon_menu-square_alt

icon_menu-circle_alt

icon_comment

social_rss

social_rss_circle

social_rss_square

In Conclusion

Icon Fonts are an amazing tool to have when designing a website, and we wanted you to have the very best toolset possible. Combine this free custom icon font with the power of the Divi Builder itself, and you’re well on your way to creating websites that are truly elegant.

Source link