How Anyone Can Use Icon Fonts With Font Awesome
Today we’ll share exactly how anyone can use icon fonts with Font Awesome.
Update 2019: Today, many plugins, themes or page builders already come with font awesome icons built in, so most WordPress users have little need to install icon fonts themselves. However, should you be one of the rare few not using any of those plugins, you can still get Font Awesome going by following the directions as outlined below.
As you will see below, we used icon fonts for the headings on the buyers page, and they add that little extra spice, without using images. Also, any css style you can apply to fonts, can be applied to icon fonts. For instance, you can easily apply color or size to an icon fonts, exactly as you would apply it to any other text font.
Now, there are a number of icon fonts available but I really like Font Awesome because it’s easy to install, they have a nice selection of fonts, and when I’m writing blog posts or creating new pages, they are quick and easy to use.
By the way, I highly suggest the icon fonts sparingly. Why? They can and will slow down your page loads. Rather than go into an explanation most of my readers won’t understand and don’t care to learn, just take my word for it. It’s okay to use them, just don’t get crazy!
Getting Started With Icon Fonts on Your WordPress Site
Installation for Non Coders
If you’re not a nerdy type like me and don’t want to edit your header.php in your server files, just grab this Font Awesome plugin, follow the directions and you’ll be all set.
Nerdy Instructions
There are a couple of ways to set up Font Awesome but for my WordPress site, I went to fontawesome.io. Nowadays new users must provide an email and fill their form to receive a free kit. The kit will come with instructions about how to get tings set up. Then, select Get Started on the menu. Then, I chose the easy installation using the Bootstrap CDN by Max CDN. Then, copy that one line of code and add it to the head section of your site.
Some Themes Have a Settings Area to Install the Code
Some WordPress themes, such as the Beaver Builder theme, have a settings section enabling you to add code to the head of your site, without accessing your server files. If you have this settings feature go ahead and use it. If you’re building a site for a client, I’d suggest installing the code on the server in the header.php file as mentioned below.
Add Code to header.php in Server Files
Another way to get your icon fonts up and running is to go to your host’s server and add it to the header.php file. Just paste the code anywhere on the page, but BEFORE the closing head tag. Hit save and in a minute or two you will be good to go!
Using Icon fonts in a Blog Post
To add an icon font to your site, go back to Font Awesome and select icons from the menu. Choose the icon you want to use on your post or page, then copy the html tag provided. Go back to your post or page and paste it into your text editor. It will not work if you use the code in your WordPress Visual Editor! Click save, view the page, and there you have it!
At Assist Start, we can build a WordPress website for you, or coach you to build it yourself! Either way, once complete you’ll have a site that is customized per your specifications with built in extended functionality designed to grow with the times. Contact us today to learn more!
We invite you to comment and hope you found helpful the information in this post, How Anyone Can Use Simple Icon Fonts With Font Awesome.