Plugins

How to Use Icon Fonts in WordPress

January 17th, 2016

Icon fonts are a great thing, as they have a lot of things to offer that regular icons don’t have. As technically, they are fonts and not images, these symbols generated from these fonts don’t have the disadvantages of classic icons. Colors and sizes of the font icons can easily be controlled with CSS and HTML. This means they are scalable and can be used for retina displays as well. In this article, we’ll deal with the question how to use icon fonts in WordPress the best way possible.

How to Use Icon Fonts in WordPress

Two Ways to Use Icon Fonts in WordPress

The most famous and most extensive icon font is surely »Font Awesome« and it’s the font we’ll use for this article. Font Awesome provides 605 icons for almost all conceivable purposes, and it’s very easy to integrate and use. Today, I will introduce you to two ways of integrating the font – the manual method and the integration via a plugin.

Important Links:

Font Awesome

Using Font Awesome Manually

Using Font Awesome manually offers the advantage of higher performance. Your website is not slowed down by unnecessary CSS and JavaScript files. Only one CSS file, which is delivered via MaxCDN’s CDN server, has to be integrated. Of course, you can also upload the needed files to your server, but the integration via MaxCDN will be faster and more performant. Copy the following code into the functions.php of your theme:

Clicking the graphic opens the GitHub Gist
font-awesome-einbinden

That’s all that’s needed to be able to use the font. If you want to display an icon, go to Font Awesome’s website and look at the examples to get used to using it. You will notice that these icons are changeable and usable in many different ways. You can simply define the size of the pictograms using HTML, which you can enter in WordPress editor’s text view:

Beispiel

Editor

The Result:

Das Ergebnis

Quick Tip:

By the way, the <i> tag is not really necessary, as it also works with a <span>, <p> or <div> element. The color adjustments can easily be made via CSS. The size can also be altered by simply changing the font size.

css-iconfonts

Using Font Awesome With a Plugin

Fontallic

  • Developer(s): Various
  • Work in Progress: More or Less
  • Latest Version From: A Year Ago
  • Compatibility with WordPress 4.4.1: Full
  • Costs: Free on WordPress.org
  • License: GNU GENERAL PUBLIC LICENSE
  • Incompatibilities: Unknown
  • Developer Homepage: Unknown
  • Download from WordPress.org

The advantage of the plugin »WP Fontallic Easypromoweb« is that it has more integrated icon fonts besides Font Awsome. This plugin gives you access to a whole of 2,553 icons. Thanks to the visual editor, you don’t have to go to the text area of your WordPress text editor, as you can easily implement the icons using an additional button in the editor’s menu pane.

Der Button für die Icon-Fonts

Clicking the selection button opens a selection list for the icons.

Die Auswahl der Icons

The pictograms can be further adjusted regarding font size and color. However, it’s not possible to assign the icons to specific HTML elements when using the visual editor. To do that, you need to go back to the editor’s text area and manually assign the symbols.

Icons im Texteditor

Das Ergebnis auf der Website

Addition: Hosting the Icon Fonts on Your Server

The two options that I just presented bribe with simplicity. Not a lot of work is needed to be able to use the font’s advantages. Of course, you can also host the icon font yourself on your server/the web hosting package. This is certainly necessary for other fonts than Font Awesome. That’s why we’ll go through the steps again. First, you need to download the respective download package, the example being Font Awesome.

Subsequently, the .ZIP file is unzipped. The folder “fonts”, which contains the required fonts, is uploaded to the root index of the active theme via (S)FTP. The “font-awesome.css” is taken out of the folder “css”. The data paths to the fonts in the fonts folder still need to be adjusted to (example) url('fonts/fontawesome-webfont.eot?v=4.5.0');. Then, the CSS is placed in the theme’s root index of the theme and referenced in its header. This happens due to the following entry in the theme’s functions.php:

Clicking the Graphic Opens the GitHub Gist
Das Font Awesome CSS in den Header des Themes bringen

Conclusion

Icon fonts are an excellent invention, and I like using them. My favorite is Font Awesome, especially because I only need to integrate one file via the CDN. In my opinion, a plugin doesn’t make much sense, as the manual use is faster and you only need to go to the text area of the text editor to assign icons for lists, buttons, and similar things.

Those that don’t dare to touch the code are apparently served similarly well with using the plugin.

(dpe)

Andreas Hecht is a journalist and specialist for WordPress and WordPress Security. He roams the web since its inception. He has published an ebook on WordPress Security, which you might want to take a look at.

Leave a Reply

2 Comments on "How to Use Icon Fonts in WordPress"

Notify of
avatar

Sort by:   newest | oldest | most voted
Valli P
Guest
8 months 12 days ago

Very informative! Font Awesome is impressive and I too have tried it for creating social network icons in some of my projects and they looks great.

Steave
Guest
8 months 7 days ago

Hai, great article, I tried to create icons for my projects. It’s working good, keep going

wpDiscuz