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 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.

 

I am going to walk through the steps of adding a font awesome icon to your content. 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 “

 


 

Background

Code vs Glyph vs Unicode

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

 

Code
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. In some cases the editor does not understand how to handle the tag and will remove it. If this occurs, the work-a-round is to include an unicode zero width space code between the  tags as illustrated below. There is no downside to adding the code, but it is one additional step.

 

To Display:   

Embed: <i class=”far fa-envelope”>&#x200B;</i>

 

Glyph
A glyph is defined as a hieroglyphic character or symbol and is supported by font awesome. Although they require the use of a template, I like the versatility of the result. Font awesome organizes its icons by type which includes brand (fab), regular (far), and solid (fas). It’s important to match the right template to the desired icon.

 

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.

 

Templates

½×

GitHub Gist

template04.html

 

 Lesson

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

  1. The statement will be standard height
  2. The icon color will be selected from the Xidipity palette
  3. The icon will be the font awesome envelope icon
  4. The text color will be the default
  5. The icon color will be pink 500 “e91e63”
  6. 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 upright 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

 

4. Color Icon

  1. Open the Xidipity 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 “

 

Informative Comments

 

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

 

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

 

Only icons inserted as glyphs can be easily highlighted and then 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 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. The following table works as the icons are small and the careful application of Tailwind classes.

 

Item
Small Blue Widget
Large Blue Widget
Small Yellow Widget

 

class="w-1/8 sm:w-1/16 md:w-1/13 lg:w-1/20 xl:w-1/25"

 

By adding these tailwind classes the default width of the first column is 1/8 the available space; on tablets 1/16, laptops 1/20, and desktops 1/25. 

 

          

Hint: The stars above where styled by highlighting and then selecting a yellow text color.

 

Leave a Reply

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