How to Use Icon Fonts in WordPress
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.
Two Ways to Use Icon Fonts in WordPressThe 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.
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.
Using Font Awesome With a Plugin
- 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
Addition: Hosting the Icon Fonts on Your ServerThe 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