Font Awesome and WordPress as Part of Your Daily Flow

So far everything I’ve shown you in this series in cool and fun, but really on a daily basis how are you going to use Font Awesome on your WordPress site?

Lists

Used as bullets in lists, Font Awesome icons can add visual cues:

• Donec vulputate tellus ut metus lacinia, ut semper ipsum feugiat.
• Nullam tincidunt lorem id dictum pellentesque.
• Donec lacinia arcu sed metus malesuada molestie.
• Duis id nisl id purus scelerisque lacinia.
• Vestibulum finibus quam et tortor lobortis, sit amet interdum magna porta. Duis id nisl id purus scelerisque lacinia. Duis id nisl id purus scelerisque lacinia. Duis id nisl id purus scelerisque lacinia.

In the above example I suppressed the default <li> circles for this list only by adding a class of “nodot” to the <ul>:

ul.nodot {
 list-style-type: none;
 padding-left: 20px;
 color: #666;
}

ul.nodot li {
 list-style-type: none;
  position: relative;
  padding-left: 20px;
}

ul.nodot li i:before {
  position: absolute;
  top: 5px;
  left: 0;
}

.danger {color: #FF0000;}
.ok {color: #00FF00;}

As you can see from the last line, wrapping is retained as normal for a list. I did have to incrementally fiddle with the position of the icon. At first it was too high on the line, but by changing the top positioning in this CSS statement was I was able to get it lined up.

ul.nodot li i:before {
  position: absolute;
  top: 5px;
  left: 0;
}

Links

There is a group that advocates using icons on links to show what kind of link it is. Internal links have one kind of icon, while external links have other kinds. An icon added to a download link lets the user know what to expect.

Action Items

Call attention to something in your post with a call to action that links to your order form or contact information:

Are you using Font Awesome in your daily routine? Let me know what you use it for!