Currently users tends to be focusing on visual design, apart from content that they want to looking for. Traditionally designers usually individual images for icons in the specific parts of the website, such as search bar, loading icons, and many more. Focus on responsive design, many stunning iconography are available to help you make the site look well. Font Awesome is one of them. In this article, I will provide a full guide of using Font Awesome with WordPress.
What is Font Icons?
Font Icon is a set of symbols that allows you to display fully responsive and customizable icons without utilizing additional images. And they can be resized by using CSS. In a website, you can use them for shopping cart, navigation menus, address, so on.
Why is Font Icon useful?
- Fully responsive: Font Icon is vector so it can be scaled to any size without loss of the quality.
- Be able to be styled, positioned and manipulated: You can set the color, the background color, or text alignment, and many more
- Highly compatible with many browsers
Why Font Awesome is highly recommended?
Here is an example of Font Awesome icons that you always bump into when visiting any site.
There are many font icons but Font Awesome is a popular choice among them. Because it offers a couple of advantages:
- Easy to grasp (within a minute) without any design experience
- More than 630 icons covering all kinds of different things
- Retina display ready
- Set icons to any size, style through things like CSS
- Scalable, great vector graphics
- No fee
- Be able to animate the icons
- Supports several brand logos like facebook, twitter, etc.
Adding Font Awesome to your WordPress
1. Method 1: Add Font Awesome by using plugins
This is the easiest way to get Font Awesome. There is a couple of plugins that can help you do it, especially the free plugins like Better Font Awesome. With this plugin, you are given a wide range of icons without any code modification. I think that for beginners it may work well.
- Install and activate the plugin
- Visit Settings > Better Font Awesome to configure the plugin settings
- You can add font icons by using shortcodes:
Also, you can add the icons in the post editor.
- Click the Insert Icon
- Add shortcodes or HTML of the icon
It’s very simple, right?
1. Method 2: Add Font Awesome CDN to WordPress
This plugin is hosted and sponsored at KeyCDN with 25+ servers. There are many great benefits you can get when using the CDN service.
- With the Key CDN’s performance tool, you can test how fast the delivery of that file is in 14 different locations.