Fun with Font Awesome

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.

Fun with Font Awesome Image #010
Font Awesome Page

Font Awesome is an easy way to add icons to your blog site. With support built into the theme you have access to the current library of 1,295 free 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.

 

Font awesome is a powerful and flexible design tool and the focus of this discussion will be using the glyph. Sometimes it is handy to see the finished product before beginning, so it is presented below.

 

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

 


§

 

Code vs Glyph vs Unicode

At the top of each font awesome icon page are three methods in which to obtain the icon.

 

Code tag

This is the most common method of adding a font awesome icon. The heavy lifting is performed by a series of Cascading Style Sheets but there is an issue with WordPerfect and the use of the “<i>” tag. The work-a-round is to include a Zero Width Space unicode character or a character of your choosing to the empty tags as shown below. To learn how to insert an icon tag at the beginning of a header see “Add An Icon to a Content Header“.

 

Glyph

A glyph is defined as a hieroglyphic character or symbol and is supported by font awesome. I like the versatility of the glyph but using them requires the use a template. 

 

Template

½×

GitHub Gist

general / font awesome / glyph

 

Unicode

Unicode is a standard where each letter, digit, or symbol is assigned a unique numeric value that applies across different platforms and programs. Font awesome supports this standard but the solution is not flexible as it requires creating custom Cascading Style Sheets (css) code.

 

Lesson

For this tutorial I will demonstrate how to add a font awesome icon glyph. A little planning goes a long way so let’s review my assumptions. 

  1. The icon color will be selected from the color palette
  2. The icon will be the font awesome envelope icon
  3. The text color will be the default
  4. The icon color will be pink 500 “e91e63
  5. I will not be concerned with the icon size or justifying the text

 

steps

 

1
preview font awesome Icon

 

Before getting started we need to learn the category assigned to the envelope icon. The reason for this is beginning with version 5, the icons are handled differently for each category.

 

To complete this task goto the font awesome envelope icon page. Just below the icon name is the icon style (see #1 above). The style of this icon is “Regular (far)” which means we must use the FAR template.

 

I find opening the font awesome icon page in a new tab or window helpful as it allows me to return to it when I am ready to copy the tag or glyph.

 

2
create text / add template

 

Create Text
  1. Place the cursor at the line in the document where the header will be placed
  2. Type the statement from above
    Highlight and click italic button to style

 

Add Template
  1. Highlight and copy the FAR template to clipboard from above
    Template = “<span class=”far-glyph”>••</span>”
  2. Place the cursor where the icon will be inserted (ie. before Follow)
  3. Click the embed ( save_alt ) button
  4. Paste the template into the text box
    Template = “<span class=”far-glyph”>••</span>”
  5. Click OK button
  6. Add spacing after the dots as desired

 

At this point our statement should look something like the following.

 

“•• Follow these guidelines to ensure prompt delivery of your mail “

 

3
copy & paste glyph

 

  1. Place the cursor between the dots (•×•)
  2. Return to font awesome tab/window
  3. Copy the glyph to the clipboard
    Hint: click icon
  4. Paste glyph between dots
  5. Delete dots

 

At this point our statement should look something like the following.

 

“•• Follow these guidelines to ensure prompt delivery of your mail “

 

4
style icon

 

  1. Open the color palette
  2. Look for the color pink 500 (“e91e63“)
  3. Click the swatch
    This action copies the hex code to the clipboard.
  4. Highlight the icon.
  5. Click the text color drop down ( format_color_text )
  6. Select custom
  7. Highlight the hex code to the right of the “#”
  8. Paste the new hex code into the text box
  9. Click the Ok button

 

Now the statement should look like the following:

 

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

 

If the desire becomes to style the statement in a larger font, the icon will also be resized. For example, the following is resized to 18px.

 

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

 

Icons inserted as glyphs can be easily highlighted and styled. Font awesome design language assumes a bold icon is a filled or solid icon and has icons in the library for this purpose. To illustrate, a bold envelope icon is:   .

 

adding icons to tables

 

An icon glyph may be added to the contents of a table cell in the same manner as above or presented in its own cell. As tables are not responsive adding icons about the same size as the text should work. However, adding a large icon will be problematic on small mobile devices. 

Item
Small Blue Widget
Large Blue Widget
Small Yellow Widget

 

thumb_up
star_borderstar_borderstar_borderstar_borderstar_border

Hint: The stars may be styled by highlighting and selecting the desired color. Be sure the entire star(s) is highlighted.

 

 

Leave a Reply

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