Font Awesome Icons

The primary reason for using icons is they share a common visual language which effectively bridges language gaps. They’re instantaneously recognizable and remove open interpretation. This makes them perfect for a digital context, as the Internet is shared by many people and their corresponding cultures.

Font Awesome is an easy way to add icons to your blog site. With built-in support you have access to the current library of 675 icons and new additions when they become available. 

 

Design is all about communication. It doesn’t matter how important or exciting the information you’re sharing, if the content fails to entice the reader to continue reading the point becomes mute.

 

Icons serve the same psychological purpose as a paragraph break. They visually separate the content making it less intimidating. A well-formatted page with text organized into easily accessible paragraphs and accented by icons is easy to read and visually interesting enough to sustain the reader’s attention.

 

An icon like any other embedded image needs to communicate a message and the message should support the associated content. For example, including a “Facebook” icon in your content without any reference to it is confusing.

 

Use Case

Assume you want to make the following statement:

 

“Follow these guidelines to ensure prompt delivery of your mail”.

 

Adding the sentence above to your post results in the following:

 

Follow these guidelines to ensure prompt delivery of your mail.

 

The sentence was embellished with a link to allow the reader to drill down for more information. However, the question remains as to the likelihood the reader will miss the importance of this statement.  To mitigate the risk, let’s add an icon. Since we are referring to the delivery of mail, a mail icon sounds like a logical choice.

 

Installation

  1. Goto font awesome icons
  2. Search or browse for the mail icon
  3. Click the outline envelope choice 
  4. Highlight and copy to the clipboard the following line from their page
<i class="fa fa-envelope-open-o" aria-hidden="true"> </i>
  1. Place the cursor just before the word “Follow”
  2. Click the editor “Insert ” menu dropdown
  3. Select “ Media”
  4. Select the “Embed” tab
  5. Paste clipboard content into the text box
  6. Click the “OK” button

 

The following is the result.

 

Follow these guidelines to ensure prompt delivery of your mail.

 

As you can see we have an issue with spacing after the icon and while we are fixing the spacing lets add some color.

 

Installation

  1. Goto font awesome icons
  2. Search or browse for the mail icon
  3. Click the outline envelope choice 
  4. Highlight and copy to the clipboard the following line from their page
  5. Open the Sandbox editor
  6. Paste clipboard contents into the Sandbox
  7. Make the changes as follows
<i class="pr-2 text-pink-dark fa fa-envelope-open-o" aria-hidden="true"> </i>
  1. Highlight and copy content to the clipboard from the Sandbox
  2. Place the cursor just before the word “Follow”
  3. Click the editor “Insert ” menu dropdown
  4. Select “ Media”
  5. Select the “Embed” tab
  6. Paste clipboard content into the text box
  7. Click the “OK” button

 

The following is the result.

 

Follow these guidelines to ensure prompt delivery of your mail.

 

What did we change? With a little help from Tailwind, we  added two increments of padding right (pr-2) and from the Xidipity palette we selected and changed the color to dark pink (text-pink-dark).

 

Options

As the following list demonstrates, font awesome offers a variety of styling options. I cover some of these items in other posts. 

  • Fixed Width Icons
  • List Icons
  • Bordered & Pulled Icons
  • Animated Icons
  • Rotated & Flipped
  • Stacked Icons

 

Tailwind

The icons can also be styled using Tailwind classes which is my preference.  The following is an example of sizing using the “text-size” class.

 

text-xs
text-sm
text-base
text-lg
text-xl
text-2xl
text-3xl
text-4xl
text-5xl
text-6xl

 

Leave a Reply

Your email address will not be published. Required fields are marked *