Playing with Font Awesome

[Update 20170616 – I’m sorry to say that the Font Awesome plugin used in this post doesn’t work as of WordPress 4.8. Too bad, it was fun!]

Font Awesome is a set of icon fonts, developed to be compatible with Bootstrap, one of the most popular front-end frameworks and open source projects in the world.

For this exercise I’m using the Font Awesome Icons plugin, which lets me insert icons into a post via shortcodes and a pull-down added to the editor. Since I don’t know any of the names used by the icons, that seemed to be the simplest way to go. [That didn’t seem to work, so I’m trying to use the font directly, via icon <i> tags.]

Let’s try some:

fa-camera-retro

fa-camera-retro fa-lg

fa-camera-retro fa-2x

fa-camera-retro fa-3x

fa-camera-retro fa-4x

fa-camera-retro fa-5x

  • List icons (like these)
  • can be used
  • to replace
  • default bullets in lists


Use a few styles together and you’ll have easy pull quotes or a great introductory article icon.

fa-spinner fa-spin
fa-refresh fa-spin
fa-cog fa-spin

  normal

  fa-rotate-90

  fa-rotate-180

  fa-rotate-270

  fa-flip-horizontal

  icon-flip-vertical

fa-twitter on fa-square-o

fa-flag on fa-circle

fa-terminal on fa-square

fa-ban on fa-camera

I copied all of the above from the Font Awesome Examples page, simply because I’m not familiar with the Font Awesome Cheatsheet.