Archive for Blogging Tips

How Anyone Can Use Simple Icon Fonts With Font Awesome

Today we’ll share exactly how anyone can use simple icon fonts with Font Awesome.

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.

Getting Started With Icon Fonts on Your WordPress Site

There are a couple of ways to set up Font Awesome but for my wordpress site, I went to fontawesome.io. 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. In the video, I show you two ways to install it on your site and then how to use it in your blog post or page.

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.

Share Your Thoughts!

Let's Schedule a Time to Talk About How We Can Help You Reach Your Goals

Let's Connect