How to Easily Add Icon Fonts in WordPress Theme
Icon fonts allow you to add vector (resizable) icons without slowing down your website. They are loaded like web fonts and can be styled using CSS.
What are Icon Fonts and Why You Should Use Them?
Icon fonts contain symbols or pictograms instead of letters and numbers. These pictograms can be easily added to website content and resized using CSS. Compared to image-based icons, font icons are much faster which helps with your overall WordPress website speed.
Icon fonts can be used to display commonly used icons. For example, you can use them with your shopping cart, download buttons, feature boxes, giveaway contest, and even in WordPress navigation menus.
There are several free and open-source icon fonts available that have hundreds of beautiful icons.
Each WordPress install comes with the free dash icons font set. These icons are used in the WordPress admin menu and other areas inside the WordPress admin area.
Some other popular icon fonts are:
- Font Awesome
- Genericons
- IcoMoon
- Linear icons
- Material Icons by Google
- The Noun Project
Adding Icon Fonts in WordPress Using Plugins
If you are a beginner level user just trying to add some icons to your posts or pages, then this method is suitable for you. You wouldn’t have to modify theme files, and you would be able to use icon fonts everywhere on your website.
First thing you need to do is install and activate the Font Awesome plugin for WordPress. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, the plugin enables Font Awesome support for your theme. You can now edit any WordPress post or page and use icon shortcode like this:
[icon name= ”rocket”]
You can use this shortcode along with other text or by itself in a dedicated shortcode block.
Using Icon Fonts with a WordPress Page Builder
Most popular WordPress page builder plugins come with built-in support for fonts. This allows you to easily use icon fonts in your landing pages as well as other areas on your website.
- Beaver Builder
- Elementor Pro
Adding Icon Fonts in WordPress Manually with Code
Icon fonts are just fonts and can be added to your site like you would add any custom fonts.
Some fonts like Font Awesome, are available from CDN servers across the web and can be linked from your WordPress theme directly.
You can also upload the entire font directory to a folder in your WordPress theme and then use those fonts in your stylesheet.