When I walked through setting up my blog on my Udemy course I set up the cool little-estimated reading time you see just above this text.

You’ll notice that there’s now a cool eye right before the estimated reading time text. That wasn’t there before! You can use these instructions to use Font Awesome icons on any part of your website, so it’s not specific to the estimated reading time.

I wanted to expand upon that estimated reading time code I put on my WordPress website to also put that eye in there. There’s also the added benefit of enabling font awesome for your entire website, therefore, enabling all the cool icons that go along with it.

You may also notice I finally made it around to putting a little more contact information on my Technkl contact page which also uses those cool font awesome icons.

So here’s how to do it (it’s super easy if you have a WPZoom theme):

1. Head over to the WPZoom menu item in your WordPress admin dashboard.
2. Open Miscellaneous and you will see a Header Code box.
3. Now paste the following code into the header code box:

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”>

Now you need to save all the changes and you can post the awesome (and easy!) codes from each of the Font Awesome icons.

Yes, that even includes the cool little.

Don’t have a WPZoom theme? Well, You’ll have to go add the above code to the header.php file in Appearance > Editor. Look for the </head> tag and paste it above that tag and save. Not too much more difficult but not quite as easy.

Now the big deal is how do you get it in that estimated reading time?

Okay, this part might not be as easy, but I’ll help you through it.

You have to head over to Appearance > Editor in your WordPress admin dashboard.

Look for the single post item that should have single.php under it and click it!

Watch out for the single post for the portfolio item! You don’t want that one, usually portfolio/single.php or single-portfolio.php.

Now you need to look for that code we inserted for the estimated reading time.

Look for :

<p><?php echo do_shortcode(‘Estimated reading time: [est_time]’); ?></p>

Now you’ll want to add the following code behind the <p> tag:

<i class=”fa fa-eye” style=”padding-right:15px; font-size:1.25em;”></i>

I added a few things in there to make it look a little better (gave it some space and made it a bit bigger).

I added the padding-right and font-size. You may want to play with these to make it even bigger (or smaller). If you do end up making it any bigger, you may also want to add a bit of extra code to align the font awesome image to the middle of the text (vertical-align: middle;).

That would look like this:

<i class=”fa fa-eye” style=”padding-right:15px; font-size:1.25em; vertical-align: middle;”></i>

That’s all you have to do! Let me know in the comments section or on Twitter with the hashtag #web4pbrand if you have problems and I’ll help you out (or someone will).

And a video that covers the same stuff: