Icons for Everyone: How to Use Font Awesome With WordPress
Font Awesome is one of the most popular icon fonts worldwide. By now, more than 60 million websites use the font to display pictograms in all colors and versions. These 60 million websites include whitehouse.gov, thebeatles.com, and washingtonpost.com. In this article, we'll show you how you can use the icons for your blog. Currently, Font Awesome provides 634 pictograms for a whole load of applications. For example, it is possible to use them to create social follow icons, like I did on my blog.
The Advantages of the Icon Font "Font Awesome."In comparison to used graphics, an icon font offers generous benefits. Icons can be scaled wonderfully, making it possible to display them in any desired size. On top of that, you can adjust them, so they have the colors you want them to shine in. This might be substantial for a business website if there is a corporate identity to stick to. Adjustments happen via CSS. Thus, everything that CSS can do is possible. Size, colors, text shadow, and much more are all possible. On the Following Page, You Get to Take a Look at All 634 Icons in an Overview.
How to Use Font Awesome in Your ThemeThere are two options how to use the font in your theme. I will present them to you one by one. Which method you choose depends on whether you like the easier way of using plugins or the more tedious manual work. Either way, you'll find the right method for you in this article.
1 - Manual Work. We Only Link the CSS FileBefore you get to use the icons, you need the CSS for the icon font. The CDN service provider KeyCDN has hosted the font on their servers. This way, a simple link to the file in your header's website is sufficient. A small code snippet that you need to copy into your theme's
functions.phptakes care of that. You can choose between two methods. Code number one links the CSS file in your blog's header. Code two is ideal if you want to optimize the speed of your website. Then, the file is loaded into the footer. https://gist.github.com/anonymous/b4b2ce4d8af44503e501f70f86f3173b https://gist.github.com/anonymous/27c9e331dd9a08a59cbc863bb31f4a17 Now, you are already able to use the icons. You have two options for the manual application. Option number one is the <i> tag, provided for each icon by Font Awesome. Take a look at plenty of examples on the example page. [caption id="attachment_78218" align="alignnone" width="640"] Adjusting the Icon Size is This Simple.[/caption] However, you're not tied to the <i> tag, but also able to define and use the icons in the CSS. This is useful for areas that don't tolerate additional markup well. By the way, Less and Sass are supported just as well as pure CSS. When you click an icon on the overview page of Font Awesome, you get to a page where the particular <i> tag is displayed. Above that, you'll also find the so-called Unicode, which is required for the use in the CSS file. A part of my CSS for the social follow buttons (screenshot above) looks as follows: https://gist.github.com/anonymous/791df49ad67685ccdfbf5558d657091b Find the Unicode Here:
Using the Icon Font in the WordPress-EditorOf course, you can also use the neat icons directly within the WordPress editor when writing your articles. To do that, you have to pay the text area a visit and enter the corresponding <i> tag where you want it to appear. Visit the overview page of Font Awesome, pick an icon and click it. On the next page, you'll find the proper tag for that icon.
2 - Easy Peasy, Using the Plugin »Better Font Awesome.«
- Developer: Mickey Kay
- Work in progress: yes
- Latest version from: 06.01.2016
- Costs: free via WordPress.org
- License: GNU GENERAL PUBLIC LICENSE
- Known compatibility issues: unknown
- Developer Homepage: Unknown
- Download on WordPress.org
[icon name="flag" class="2x spin border"]Number 3: The Well-Known HTML-Tag
<i class="fa fa-check-square-o" aria-hidden="true"></i>