Add Font Awesome Icons To WordPress Manually Via The Functions.php File - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Wordpress WPLearningLab Video: Add Font Awesome Icons To WordPress Manually Via The Functions.php File.
Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL
Add Font Awesome Icons To WordPress Manually Via The Functions.php File https://youtu.be/U323QLDy3bQ

Child theme: https://www.youtube.com/watch?v=ZBoW1PtcURo

Blog post with font-awesome code: https://wplearninglab.com/font-awesome-icons-functions/

Download your exclusive 10-Point WP Security Checklist: http://bit.ly/10point-wordpress-hardening-checklist

The best way to add font awesome icons to your WP site without a plugin is by adding a code snippet inside your theme's functions.php file. It is safest to do this inside a child theme, which I'll get into in a minute.

Why Create A Child Theme

When you make changes to your theme's template files your changes can be overwritten when the theme is updated. Depending on your theme it may be updated every few months.

When you create a child theme, the changes you make are not overwritten by parent theme updates. You may find the parent theme updates alter your child theme's appearance because the developer may update files that you modified in your child theme. So you may have to make adjustments when the parent theme is updated, but that's pretty rare.

Now that you know the value of a child theme, if you want to create one I've created a step-by-step video tutorial for you (YouTube link): https://www.youtube.com/watch?v=ZBoW1PtcURo&list=PLlgSvQqMfii6X3D9S4mwM_inUYv8gq564&index=3

Adding Font Awesome Code To Your Theme

Now, in your parent theme or child theme, whichever one you have, hover over to the appearance menu and click on editor as shown on the screenshot below.

This will open a list of all the files in your theme. In my example, I'm using a child theme that contains two files, the functions.php file and the style.css file. We'll deal with the functions file first.

Go to the functions file and paste in this code as shown in the screenshot below:

What this code does is enqueue (or add) the Font Awesome stylesheet to the website header.

If you look closely at the code you copied and pasted, you can see that it's for Font Awesome version 4.7. That's the most recent version as of this writing and version 5.0 is coming soon.

When there are updates to Font Awesome and you want the new icons you'll need to update this code.

For example, if version 4.7.1 comes out, you will need change 4.7.0 to 4.7.1 in the URL you copied and pasted. This will load the new font awesome icons. Manually updating like this is a drawback, but you can solve it by using the Font Awesome plugin.

Using Font Awesome Icons

Now that you have the code added to your site, the next step is to add the font awesome icons. To do so head over the Font Awesome website: http://fontawesome.io/

Find the Icon You Need

Once you're on the font awesome site, you'll need to find the code for the icon you want on your site. Find the icons menu and click on All Icons.

There are 675 of them as of this writing. Pick the one you want. For the purpose of this tutorial, I picked out the recycle icon because today is recycling day in my neighbourhood.

Read the rest on the blog: https://wplearninglab.com/font-awesome-icons-functions/

Subscribe to this awesome channel here: http://www.youtube.com/subscription_center?add_user=wplearninglab

Published: Saturday, August 10, 2019 8:44 AM
Category: Wordpress WPLearningLab

75 Views

Related Videos

Social Media Icons Hover Effect using HTML & CSS | Font Awesome Icons

by Best Webhosting Added 3 years ago 74 Views / 0 Likes

Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D Another Course : Build Complete Real World Responsive Websites from Scratch https://www.udemy.com/course/complete-responsive-website-design-from-scratch/?referralCode=F1DFAF1715AF6CE5780E ------------------ Join Our Channel Membership And Get Source Code of My New Video's Eve
WordPress. How To Change Font Awesome Icons

by Best Webhosting Added 4 years ago 81 Views / 0 Likes

This video tutorial shows how to change Font Awesome icons in WordPress template. To view more our WordPress templates go to website: http://www.templatemonster.com/wordpress-themes.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts26 Build Absolutely Anything with Monstroid WordPress Theme: http://www.templatemonster.com/wordpress-themes/monstroid/?utm_source=youtube&utm_medium=link&utm_campaign=wptuts26 TOP WordPress Themes: https://www.yout
WordPress. How To Change Font Awesome Icons

by Best Webhosting Added 4 years ago 87 Views / 0 Likes

This tutorial shows how to change Font Awesome icons in WordPress templates. Choose your WordPress template now: http://www.templatemonster.com/wordpress-themes.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts100 Want to Build WordPress Site in 5 Hours? Subscribe to this course: http://www.templatemonster.com/website-5-days.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts100 TOP WordPress Themes: https://www.youtube.com/playlist?li
Add Font Awesome Icons To WordPress Using A Plugin

by Best Webhosting Added 4 years ago 77 Views / 0 Likes

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Add Font Awesome Icons To WordPress Using A Plugin https://youtu.be/qtznhGeAhow Download your exclusive 10-Point WP Security Checklist: http://bit.ly/10point-wordpress-hardening-checklist Font Awesome Icons, also known as fa icons, are a quick and easy way to add simple pictures to your WordPress. There are nearly 700 different icons to choose from as of the recording of th
Sliding Social Media Icons - Css3 Hover Effects - how to use font awesome icons - Pure CSS Tutorials

by Best Webhosting Added 4 years ago 87 Views / 0 Likes

Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
WordPress. How To Upgrade Font Awesome Icons Of Version 3.2.1

by Best Webhosting Added 4 years ago 68 Views / 0 Likes

This tutorial is going to show you how to upgrade Font awesome icons of version 3.2.1 in WordPress template(s). Want to Build WordPress Site in 5 Hours? Subscribe to this course: http://www.templatemonster.com/website-5-days.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts278 Choose your WordPress template now: http://www.templatemonster.com/wordpress-themes.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts278 Subscribe Our Channel:
How To Add Font-Awesome Icons On WordPress Header Menu

by Best Webhosting Added 4 years ago 82 Views / 0 Likes

In this tutorial, we will show how to add font-awesome icons on your WordPress header menu and navigation menu easily using our WordPress themes menu engine. Complete tutorial at https://visualmodo.com/knowledgebase/add-icons-wordpress-header-menu/ How To Add Icons To WordPress Header Menu? https://visualmodo.com/
WordPress. How To Replace Font Awesome Icons With Images

by Best Webhosting Added 4 years ago 96 Views / 0 Likes

This video tutorial will show you how to change iconic font icon with an image. Choose your WordPress template now: http://www.templatemonster.com/wordpress-themes.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts85 Want to Build WordPress Site in 5 Hours? Subscribe to this course: http://www.templatemonster.com/website-5-days.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts85 TOP WordPress Themes: https://www.youtube.com/playlist?l
WordPress. How To Change Font Awesome Icons (Inserted Via Shortcodes)

by Best Webhosting Added 4 years ago 67 Views / 0 Likes

You can follow this tutorial to learn more about the font-awesome icons in WordPress templates. Choose your WordPress template now: http://www.templatemonster.com/wordpress-themes.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts155 Want to Build WordPress Site in 5 Hours? Subscribe to this course: http://www.templatemonster.com/website-5-days.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts155 TOP WordPress Themes: https://www.yout
What If Font Awesome Icons Don't Show Up?

by Best Webhosting Added 4 years ago 96 Views / 0 Likes

This video tutorial will show you what if font awesome icons don't show up. We've transcribed this video tutorial for you here: http://www.templatemonster.com/help/font-awesome-icons-dont-show.html More Tutorials: http://www.templatemonster.com/help/ Subscribe Our Channel: https://www.youtube.com/user/TemplateMonsterCo/ Follow us: Facebook https://www.facebook.com/TemplateMonster/ Twitter https://twitter.com/templatemonster Instagram @template_monster
PrestaShop 1.5.x. How To Change Font Awesome Icons

by Best Webhosting Added 4 years ago 78 Views / 0 Likes

This video tutorial shows how to change Font Awesome icons in PrestaShop 1.5 templates. Build your website with templates from TemplateMonster.com: http://www.templatemonster.com/prestashop-themes.php?utm_source=youtube&utm_medium=link&utm_campaign=prshoptuts22 More PrestaShop Video Tutorials: https://www.youtube.com/playlist?list=PLhQIfRNfwAocQcTfOyM0j3LfsskZ3Ip7E Subscribe Our Channel: https://www.youtube.com/user/TemplateMonsterCo/ Follow us: Faceb
Joomla. How To Change Font Awesome Icons

by Best Webhosting Added 4 years ago 77 Views / 0 Likes

This video tutorial shows how to change Font Awesome icons in Joomla templates. To View More Our Joomla Templates Go to Website: http://www.templatemonster.com/joomla-templates.php?utm_source=youtube&utm_medium=link&utm_campaign=jootuts3 Subscribe Our Channel: https://www.youtube.com/user/TemplateMonsterCo/ Follow us: Facebook https://www.facebook.com/TemplateMonster/ Twitter https://twitter.com/templatemonster Instagram @template_monster Pinterest ht