How To Use And Embed An Icon Font On Your Website

Last week we released a pack of 100 line-style icons. Today we are releasing those exact icons in the form of a 100 piece icon font along with an extensive tutorial about how to use them. Icon fonts are great for their scalability on high-resolution displays and they can be treated and styled exactly like text. Below are steps to embed and use icon fonts on your very own website. Note that Icon fonts do not work in some Windows mobile browsers.

Download The Font Pack

Embedding an Icon Font

1. Download the icon font you wish to use.

In this tutorial we will be using the files from the download above, which contains an icon font created with icomoon.
You can also download and use our Elegant Icons Font if you wish.

2. Copy the code from “style.css” and paste it into your own “style.css” file.

This css file embeds the icon font via @font-face, and has a unique class for each icon, telling it which character in the font to use. This is also where unique styling can be added to each icon.

We always recommend using a child theme for this. For more info on child themes see our Child Theme Tutorial.

3. Copy the “fonts” folder into your theme directory:

/wp-content/themes/yourtheme/

If your theme directory already has a “fonts” folder, drag the contents from “fonts” into the existing folder.

Using an Icon Font

1. If you are using WordPress, this will not work with the visual text editor. You will want to disable the visual editor or there is a chance that all of your code will be deleted after saving. You can do this in Users>Your Profile

2. You can now insert these icons into any text area such as a post, page, or widget using two different methods.

HTML
<!-- Use the following if you want to use class selectors-->
<span class="icon-phone"></span>

<!-- Use the following if you want to use data attributes.-->
<span data-icon=""></span>

The results are visually the same, but we will be using the class method so that we can easily style the icons using external CSS.

Examples of Styling and Implementation

The instructions and examples below cover some of the different ways you can use an icon font on your website. Again, we will be using the class name method and styling the font with external CSS.

1. Placing Icons Inline

You can add an icon within any body of text. You can also style the icon however you wish by editing the css that you pasted into style.css in Step 1. Here is an example of an icon used above a Divi Theme header.

To achieve this, paste this html into a Divi text module (or any text field in any theme) and the following css into your style.css file (or custom css box in ePanel if you are using an Elegant Theme). The main thing to focus on here is the first line of HTML where I inserted the icon, and the lines of CSS used to define the icon size and color.

HTML

<span class="icon-tools-2"></span>
<h1>Advanced Drag & Drop Builder</h1>
Combining our various modules, you can build just about anything.

CSS

.icon-tools-2:before {
	content: "\e034";
	font-size: 64px;
	color: #318EC3;
}

2. Adding an Icon to Navigation Labels

Using an icon font, you can add an icon to your navigation items to give your page titles a little something extra. Below is an example using the Nimble Theme.

In the Menu Editor, you can add an icon span at the beginning of your Navigation Label to achieve this affect. You can also use just an icon for a Navigation Label like the RSS icon in the example above. This could be a cool way to add social media icon links to your navigation.

3. Using Icons as Hyperlinks

Because this is a font, anything that you can do to traditional text, can be applied to an icon font. Here is an example of an icon being used as a link. In addition, I’ve also added a hover state that makes the icon semi transparent. Try it out below!

To achieve this, paste this html into a text field, and the following css into your style.css file (or custom css box in ePanel).

HTML
<a href="https://www.elegantthemes.com"><span class="icon-download"></span></a>
DOWNLOAD

CSS
.icon-download:before {
	content: "\e04d";
	font-size: 64px;
	color: #318EC3
}

.icon-download:hover:before {
	opacity:0.5;
}

4. Styling Multiple Icons at Once

By adding a unique class to a group of icons, we can target multiple icons at once. A good example of this is adding icons to the beginning of list items. If we want to give all of these icons the same styling we can assign them an addition class to get an effect such as this.

To achieve this I have given each icon a class of “icon-list” and defined a few css styles for optimal alignment.

HTML
<span class="icon-envelope icon-list"></span> Envelope Lorem Ipsum
<br>
<span class="icon-mobile icon-list"></span> Mobile Lorem Ipsum
<br>
<span class="icon-megaphone icon-list"></span> Speaker Lorem Ipsum
<br>
<span class="icon-chat icon-list"></span> Chat Lorem Ipsum
<br>
<span class="icon-genius icon-list"></span> Genius Lorem Ipsum

CSS
.icon-list{
	width: 25px;
	text-align: center; 
	color: #AD1EB9;
}

5. Styling Your Icons with CSS Animations.

You can do some really interesting things with icons fonts using CSS animations, and because they are vector graphics, animations will not degrade the quality of the icons. Below are just a few examples of what can be done.

The above animations are entirely controlled by CSS properties defined below.

HTML
<span class="icon-heart pulse"></span>
<span class="icon-dial tick"></span>
<span class="icon-happy sway"></span>

CSS
/* Pulsing Heart Icon */
.pulse {
    -webkit-animation: pulse 4s infinite;
    -moz-animation: pulse 4s infinite;
    -o-animation: pulse 4s infinite;
    animation: pulse 4s infinite;
}
 

@-moz-keyframes pulse {
      0% {-moz-transform: scale(0.9, 0.9); opacity: 0.0;}
     50% {opacity: 1.0;}
    100% {-moz-transform: scale(1, 1); opacity: 0.0;}
}

@-webkit-keyframes pulse {
      0% {-webkit-transform: scale(0.9, 0.9); opacity: 0.0;}
     50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1, 1); opacity: 0.0;}
}

@keyframes pulse {
      0% {scale: (0.9, 0.9); opacity: 0.0;}
     50% {opacity: 1.0;}
    100% {scale: (1, 1); opacity: 0.0;}
}

/* Ticking Dial Icon */
.tick {
    -webkit-animation: tick steps(4) 2s infinite normal;
    -moz-animation: tick steps(4) 2s infinite normal;
    -o-animation: tick steps(4) 2s infinite normal;
    animation: tick steps(4) 2s infinite normal;
}

@-moz-keyframes tick { 100% { -moz-transform: rotate(360deg); } }

@-webkit-keyframes tick { 100% { -webkit-transform: rotate(360deg); } }

@keyframes tick { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
 
/* Swaying Happy-Face Icon */
.sway {
    -webkit-animation: sway 3s ease-in-out infinite alternate;
    -moz-animation: sway 3s ease-in-out infinite alternate;
    -o-animation: sway 3s ease-in-out infinite alternate;
    animation: sway 3s ease-in-out infinite alternate;
}
 
@-moz-keyframes sway {
      0% { -moz-transform: rotate(-15deg); }
    100% { -moz-transform: rotate(15deg); }
}
 
@-webkit-keyframes sway {
      0% { -webkit-transform: rotate(-15deg); }
    100% { -webkit-transform: rotate(15deg); }
}
 
@-o-keyframes sway {
      0% { -o-transform: rotate(-15deg); }
    100% { -o-transform: rotate(15deg); }
}
 
@-ms-keyframes sway {
      0% { -ms-transform: rotate(-15deg); }
    100% { -ms-transform: rotate(15deg); }
}
 
@keyframes sway {
      0% { transform: rotate(-15deg); }
    100% { transform: rotate(15deg); }
}

6. Combining Multiple Icons

A huge limitation to icon fonts is that they use SVG assets to create the icons, which do not support transparency or multiple colors. One way around this is placing icons directly on top of each other and styling each icon as desired.

To achieve this affect I have stacked two icons by giving them absolute positioning and center aligning the two. Below is the HTML and CSS used to create this demo.

HTML
<span class="icon-laptop stacked"></span><span class="icon-cloud stacked"></span>

CSS
.stacked {
	position: absolute; 
	text-align: center; 
	width: 84px;
}

.icon-laptop{
	font-size:64px; 
	color:#BBB
}

.icon-cloud {
	font-size:32px; 
	line-height:58px; 
	color:#318EC3
}

Using Icon Fonts in Desktop Applications

Icon Fonts are also compatible with desktop applications. This is great if you are wanting to use icons in your website mock-ups. As long as the font is available in a .ttf format, follow the steps below.

1. Download the .ttf version of the font to your computer. If you are one a Mac, double click the .ttf file and you will be prompted to download it to your fonts directory. If you are on a Windows machine, if double clicking the .ttf file doesnt work, you will need to place the .ttf file in your ‘Fonts’ folder found in Control Panel.

2. Create a text box in whichever desktop application you are working in and select your icon font from the fonts menu.

3. If the the icons were assigned latin characters, then you will be able to type ‘a’, for example, and the character that was assigned to ‘a’ will appear. Many icon fonts, however, assign Unicodes to each character (i.e. U+e000). To type this out on a keyboard you will need to hold down the Alt (option on a Mac) key while typing the four digits following U+. So to type out a character with unicode U+e000 you will hold Alt and type e000. Note: On a Mac you will need to enable Unicode Hex Input in keyboard settings.

This font, along with Elegant Icons uses Unicodes. We have provided the HTML codes for you (i.e. &#xe000). The four digits that follow &#x in the hmtl codes are the same last four digits you will need for typing out unicodes (if there only two digits after &#x, type 00 before the two digits).

For even more convenience, for the font we are releasing today, we have provided a list of every icon, its class name, and its html code below. You can simply copy an icon and past it into your your desktop application.

ET-Line Icons Class Names and Unicodes

These are just a few things you can do with icon fonts, so I hope that this post has given you the tools you need to start using them in your own websites and maybe even make an icon font of your own!