How to use Font Awesome in WordPress

0
94
How to use Font Awesome
How to use Font Awesome

hello folks Jose here with another video tutorial for a WP basics dot-org in today's tutorial i will show you how to use font awesome by the time you're finished with this tutorial you will be able to add icons to navigation menu posts and pages i am in the process of redesigning my website and thought then you looked a little bit boring i decided to make them and you stand out a little bit more by adding these icons i think they look pretty good well showing you the finished product doesn't help you too much so I will go into the background now and rip out all the code and show you how to add font awesome icons from scratch step 1 the first thing we need to do is visit the font awesome website at font awesome dot i/o once you have navigated to the font awesome website click on the get started link there are a few different ways to use fun awesome but the easiest way to get fund awesome on your website is to use the front awesome CDN in order to receive a font awesome embed code all you have to do is provide an email address and the embed code will be emailed to you you will receive an email that looks something like this if you want you can click on the quick take me to my font awesome embed codes to see the options that are available to you you can add a name to your embed code this is handy if you have multiple websites and want to add customizations you can also click on edit options here you will be able to choose the format options between javascript and CSS i will choose JavaScript you can also add automatically accessibility best practices and asynchronous icon' loading asynchronous loading of the icons prevents the icons from slowing down your webpages i will choose both options once you are happy with your settings click on save and move to step two don't forget to copy this embed code you will need it for step number two step two we now have to thank you font awesome into our theme you can add the code that i am not about to show you to the end of your functions.

Php file but i would recommend that you added to a site-specific plugin you can learn more about why you should use and how to create a site specific plug-in at this link so let's get started to keep things nice and organized let's add a comment like this double forward slash on cue font awesome then add a couple of asterixis next let's add an action by typing add underscore action and then put opening closing brackets and then end that with a semicolon inside the brackets type a set of single quotations and right WP underscore on cue scripts WP enqueue scripts will add your script to the head of your source code next put a comma after this code that we just typed in and add another set of single quotes inside there let's put a name for the function that we will be creating soon you can use any name but I would suggest that you prefix it with something that is unique in order to prevent conflicts with other codes i like to use my domain name as a prefix so i will name my function WP basics underscore x a next we need to create a function so we will create it like this WP we will write function space WP basics underscore fa open close brackets and then we will put a curly brackets likes and inside it we will put a name w p and q script is the first thing we have to put in there and then after that inside the brackets working out to put a single set of quotations and we're going to give a name to the script we are about to unk you and we will call it you can call it anything you like I work all mine font underscore awesome then you put a comma then another setup open and closed quotation marks and in there you would paste in the embed code that was given to you on the font awesome website like so next just click on save and then you can move on to step number three step number three add the following code to the end of your style that CSS file we will be using the pseudo classes in this case that before to the class to target where we want the font awesome icons to appear don't worry if you don't know what a pseudo class is if you want to learn more about judo classes visit my website and shoot me a comment if there are enough requests i will create a tutorial about them all you have to recognize at this point is what needs to be changed in the code i have provided the first thing you will have to customize is the menu ID number this number can be found by going to your website and right-clicking on the desired menu item and then clicking on the inspect option i am using google chrome which makes this really easy and i would suggest you use it as well because well it's the best you will see an liim and an ID number beside it copy the ID number and place it in your style that CSS file as follows next you have to select an icon to do this visit font awesome that I 0 / icons scroll down select an icon I will search for a home icon by typing in the search field right here once you found a icon that you like click on it you should see a unicode that looks something like this go ahead and copy the code now go back to your style that CSS file and paste the code like so repeat this for all your menu items save and you are done now that we have our navigation menu looking pretty good let's have a look at adding font awesome icons to a post or page adding icons to posts or pages step 1 into of this procedure are the same as steps above or the ones that we just did in adding the icons to the navigation menu so i'm not going to repeat them here again if you have already completed the first steps you do not have to do it again so let's just jump right into our post so go to your dashboard and create a new post make sure you are in the text tab like so start by adding an opening and closing I tag like so now go to font awesome that I 0 / icons and select your icon i will select the phone icon add the f a class inside the opening tags like this the F á assigns the font family of font awesome then add the name of the icon i will use F a dash phone after the closing I tag i will add a phone number I will also add some inline styling to put some space between the icon and the number you can add this starting to your style that CSS if you like I'm just adding it here for ease of demonstration go ahead and save and let's preview our post I think that looks pretty good let's repeat that for an email address by adding the following code go ahead and save and have a look at what we have not bad font awesome allows us to add awesome icons to our website or any element in our website i hope you liked the tutorial and that it was useful to you if there was visit my website at BP basics that org or other tutorials and don't forget to like and don't forget to subscribe bye for now.