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!
- Tables That You Can Sort and Search - May 24, 2017
- Responsive Newspaper-Style Columns are Easy with CSS - May 23, 2017
- Use Tooltips to Add Context - May 22, 2017