How to use Font Awesome with WordPress

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?y1.png

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 settingsy2.png
    • You can add font icons by using shortcodes:

    [icon name=”rocket”]

    [icon name=”cloud”]

    [icon name=”headphones”]

    Also, you can add the icons in the post editor.

    • Click the Insert Icony3.png
      • 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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s