How to Make a WordPress Website using Font Awesome

When deciding whether to use a vector icon or a static image, it’s best to go with the vector. They’re lightweight and quick to load, and they can scale to any size without sacrificing resolution. Font Awesome is a fantastic collection of vector icons that you can use on your website, and they probably have practically any form or brand you’d require. And the best part? It’s completely free. Second, and perhaps most importantly, it is simple.

WordPress Icons by Font Awesome

It’s relatively simple to integrate the Font Awesome library into your WordPress site. You’ll be able to reduce your page load time and create some incredibly clean, sharp designs utilising these icons if you follow these simple instructions.

Keep in mind that the Font Awesome icons will be provided to your site as genuine fonts (most of the time). As a result, Font Awesome was born. Using CSS via @font-face and the Font Awesome font family, you’ll be able to modify and control them in the same way you would a font character.

As a result, you won’t have to worry about scaling or spacing for each browser or viewport separately. It sounds fantastic, and it is. And here’s how you go about doing it:

Font Awesome is being installed.

While there is a manual way to install and use Font Awesome for WordPress users, there is a better option. The wonderful people at Font Awesome have published an official Font Awesome WordPress plugin, and it’s fantastic.

You now have access to the [[icon name]] shortcode and the HTML snippets after installing and activating the plugin. As long as you maintain the handy FA icon list on hand, you’ll always know what icon you’re looking for. Things are set up by default on the plugin’s Settings page (located under Settings – Font Awesome). These are fine to preserve and use in general, and most folks will not require anything additional.

For most people, the Method option is the most crucial. You can choose between Webfont and SVG fonts. THE FONT AWESOME CDN WILL SEND THE ICONS AS SVG FILES RATHER THAN FONTS, while SVG provides more flexibility and functionality (such as power transformations and masking). While this is preferable in some respects, SVG isn’t supported by as many browsers, and WordPress doesn’t always work well with SVG pictures. As a result, we recommend using the Webfont version.

Font Awesome, for that matter, does: If you’re not clear what the differences are or why you’d need to utilise SVG, it’s usually best to stick with the standard Webfont technique.

It’s easy to incorporate Font Awesome icons into your WordPress site. Type I class=” fab fa-wordpress”>/i> wherever you’d like an icon to appear. Look through the icon collection to figure out what name to use.

And that’s all there is to it. The Font Awesome WordPress plugin is ideal for those who aren’t comfortable digging into their theme or files to insert the otherwise required Code. If you’re confident in your ability to do so, you can use these instructions to add Font Awesome icons to your site.

Manually Installing Font Awesome Icons

The first thing you should do is visit the Font Awesome website and click the Start Using Free button. Paid plans are available for high-traffic sites requiring an enterprise solution, but the general public can get by with the free version. You get over 5,000 performances and 1,500 icons for free on the Pro plan.

After that, it’s only a matter of copying and pasting. However, you’ll want to double-check that you’ve selected the Webfont option, as we described earlier.

Most themes include a section where you may automatically inject Code into the site’s Head>. In the case of Divi, you’d go to Theme Options – Integrations and enter this Code into the Add code to the Head of your blog section.

After you save, you can begin adding any icons you like, exactly like we did earlier. However, you will lose access to the shortcode if you do so.

If Your Theme Doesn’t Allow You to Integrate Code

If you can’t locate a place like this in your theme, you can always implement it manually. You’ll have to dive into your theme’s Core files, but it’s a quick copy/paste that’s (usually) safe. Find the header.php file in your WP dashboard under Appearance – Editor.

Find the line where /Head> is written and paste the same Code from Font Awesome before it. After pressing Update File, you’ll be able to use the FA icons right away. Again, installing Font Awesome, this method does not result in a shortcode.

Remember that you should always utilise a child theme when editing a theme file. As a result, your modifications won’t be overridden when the theme is updated.

More Installation Options

Font Awesome also offers a variety of ways to access the library if you have other, more particular needs. If you need it for something other than WordPress, they have a lot of alternatives, from NPM and Yarn instals to Sketch and React integration.

Font Awesome Icons Styling

It’s time to make the icons stand out now that you’ve installed them. Because each of the icons is controlled by a CSS class, you can do it with CSS. Colour and size are the two most popular styles. You have two options for CSS styling: put it in your stylesheets or do it inline. You should generally utilise inline styling because icons like this aren’t always consistent across a site.