Font Awesome And the Cool Eye

Written by Nick Leffler | No Comments | 3 min read

Home » The Online Presence Blog » Web Design » Font Awesome And the Cool Eye

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:

Subscribe To Grow Your Business Online

Website SEO Scan Audit Comparison
See How Your Website Compares

Get a complimentary website SEO audit and report. We'll show you how your website compares to your competitor.

Categories

Check Out Other Posts From The Blog

Ready to get more customers for your business?

Start with a local SEO audit and report if you're a local business, otherwise get a website search engine optimization report card.

Website SEO Report Card Laptop

Author Bio:

mm

Nick Leffler

Nick Leffler is the owner of Exprance, a Sacramento web design and digital marketing agency which helps businesses reach their customer online. Nick has grown his online presence with a small marketing budget by blogging, organic social media posting, and email marketing.
Posted in and tagged ,

Leave a Comment





Want a free website SEO scan and report?

See how your website compares to your competitors in less than 10 minutes!

No Thank You
Website SEO Report Card Laptop

Sign up for email updates

Get helpful tips to grow your business in your inbox every other week.

Sign up for email updates

Thank you for your submission. Check your email (and spam folder) to verify your subscription and gain access to lots of free documents.

Close

Want to get more local customers?

How much are you willing to invest in your business each month?

Sometimes doing it yourself is the best option to save money.

Would you like to learn more about a company we work with that has the tools you need to succeed?