Icon fonts are symbols rather than letters, allowing you to add vector symbols to your website without slowing it down, as you will be using font files and not large graphic files. Whether letters or symbols, fonts themselves are graphics and have more uses than just text. In this article, we will discuss how to add icon fonts to your WordPress website. But first, let’s discuss situations where you might want to use them.
When Can I Use My Icon Fonts?
The obvious advantage of icon fonts over traditional image-based icons is speed: a font symbolto be vector graphic, loads the same regardless of size each icon appears on your screen. Non-vector graphics lose their quality and become blurry when enlarged. They’re also very difficult to handle and may require you to use image editors to create multiple versions of each graphic and then play around with your website settings until you’re sure the most appropriate version of each device your visitor can use is displayed. graphic.
Conversely, fonts (including icon fonts) easily scalable without loss of qualitythey are literally made to be styled with colors and shadesif necessary and usually mildespecially when compared to other charts.
An icon font typically includes: commonly used symbols for various online functions such as folders, chat bubbles, arrows, folders, pins and so on. These are usually found in navigation menus, but you can use them wherever you would otherwise use an image to indicate a common function. Also there will probably be save you some time and money on icon design – after all, all you need is a comprehensive font.
There are loads of icon fonts to choose from, but here are our picks: Font Awesome and font elegant. For the purposes of this demonstration we will mostly use Font Awesome. Here’s what we’re going to cover:
Except for the methods described above, you can add your icon fonts as custom fonts just as you would any other font. We won’t discuss this method here because we covered adding custom fonts to WordPress in depth in another article.
If you’re a beginner WordPress user and don’t feel comfortable adding new fonts to your theme by modifying theme files – quite understandably – then a plugin is probably a good option for you. The plugin we will use is Better Font Awesome. You need to install and activate it from the plugins section of your WordPress dashboard.
That’s it, your website will now have Font Awesome support.
But to use icons, you need something else: a shortcode. A shortcode is a piece of code with a simple function. In this case, it is for displaying an icon. To use Font Awesome icons, you must first know what they are called and what they look like. You can easily do this using cheat sheet provided by the font’s developers.
Then, to add your font shortcodes to your website add shortcode block If you’re using the Gutenberg block editor, a shortcode element if you’re using Elementor, or type the shortcode where you need it if you’re using the Classic editor (make sure you switch to Text edit mode). We’ll show you how to do it with Gutenberg. We’ll add the shortcode to a post, but it works the same for any area of your website that can accept a shortcode.
by clicking on plus sign, you get the block menu. Search for a shortcode block and paste the shortcode you like. You can find the name of an icon on the cheat sheet and add it to the shortcode: [icon name=”iconname”]
Now suppose the randomly generated text we use describes a drink. We will use it as a vignette in the text [icon name=”beer”] shortcode between two text blocks.
Moreover use these shortcodes inside text blockslike a bullet. For example, we will preface the last paragraph with another symbol using the shortcode. [icon name=”arrow-circle-right”].
Your icons will be visible as part of the text on your page.
Another feature of this plugin is that it updates automatically: if a new version of Font Awesome comes out, you won’t be left behind! For more information on how to update add-ons, you can check out our handy step-by-step tutorial.
Elementor, a popular visual editor, allows you to use icon fonts easily. In fact, Elementor comes with Font Awesome already integrated. To add an icon using Elementor, start editing a post in Elementor and Symbol Select and drag where you want.
Now we have the default, placeholder icon. To select another icon, simply click on the icon image on the left with your icon element selected. You can see it has a blue rim around it.
Select the icon you like and click add to insert it instead of the placeholder. We chose a bell icon. Cool Font – Normal icon set.
In the same tab, you can add a link or change the alignment of the icon as we did.
You can change the color inside. style With your icon selected, press tab.
Now you know how to use icons in Elementor. Elementor has many other options for the style and functionality of your icons, but now you know the basics.
We will show you the easiest way to add Font Awesome icons, a comprehensive and constantly updated icon set, to your WordPress website using code. First, you need to go to: Font Awesome go to website and click Get Started for Free button.
Next, you need to provide Font Awesome with your email address and Send Kit Code.
Next, you need to check your email address and configure your account. Follow the onscreen prompts until you reach the screen holding your code. click Copy Kit Code to copy.
Finally, this code in your theme header.php file. You can find it by browsing Appearance/Theme Editor From your WordPress dashboard. It will be in the far right menu.
The kit code you copied Just paste it just below the tag.
Finally, you can also add individual Font Awesome icons to your WordPress website, directly from the developer’s library. You don’t need a plugin or anything else to do this, you can just use an icon you like. To do this, just go to: Font Awesome icons gallery and find an icon you like.
Click on it and you will find the code you need to embed.
To add your icon you need to add it using code. For the classic editor it works just by pasting the code where you want it using the Text mode. What we use at Gutenberg Custom HTML block. In Elementor you will need Custom HTML element, but the principle is the same. Just paste the code you get from the icon library.
And your icon will be where you put it!
As a result
As we show, installing an icon font pack in WordPress is very easy. And not only that – they positively contribute to your website responsiveness and loading speeds, making them a great choice if you’re serving users who access your services from mobile phones or slower connections, but also overall better in terms of user experience. Lightweight, easy to shape and quick to load: what’s not to like about it?
Support our work ❤️
If you enjoyed this article, consider leaving a tip to help us keep publishing great content.
