If you’re not satisfied with the 5x size, you’ll have to do manual CSS modification. You can make the icon up to 5 times bigger by adding ‘fa-5x’ inside the code.
FONT KIT INTO WORDPRESS CODE
Making your icons bigger or smaller can be done via CSS or you can change the code you pasted in by adding an extra class called ‘fa-2x’ inside the code. If you view your page, you’ll see that it now has a font awesome icon inside it. The pasted Font Awesome code will look like this: Then paste the code inside any page, post or custom post type or any text-based field that accepts HTML. First, copy the code from the Font Awesome website. In order to bring the Font Awesome icons to your page, you’ll need the copy and paste the embed code below pictured below. The icons will look like shown on the screenshot below: For the purpose of this tutorial, I picked out the recycle icon because today is recycling day in my neighbourhood. There are 675 of them as of this writing. Find the icons menu and click on All Icons.
Once you’re on, you’ll need to find the code for the icon you want on your site. To do so head over the Font Awesome website: Now that you have the code added to your site, the next step is to add the font awesome icons. Manually updating like this is a drawback, but you can solve it by using the Font Awesome plugin. This will load the new font awesome icons.
FONT KIT INTO WORDPRESS UPDATE
When there are updates to Font Awesome and you want the new icons you’ll need to update this code.įor 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. That’s the most recent version as of this writing and version 5.0 is coming soon. If you look closely at the code you copied and pasted, you can see that it’s for Font Awesome version 4.7. What this code does is enqueue (or add) the Font Awesome stylesheet to the website header. Go to the functions file and paste in this code as shown in the screenshot below: We’ll deal with the functions file first. In my example, I’m using a child theme that contains two files, the functions.php file and the style.css file. This will open a list of all the files in 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. 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). So you may have to make adjustments when the parent theme is updated, but that’s pretty rare. 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. When you create a child theme, the changes you make are not overwritten by parent theme updates. Depending on your theme it may be updated every few months. When you make changes to your theme’s template files your changes can be overwritten when the theme is updated.
0 kommentar(er)
