Integrating Font Awesome Icons in bbPress

The amount of thought and time that goes into designing a universally accepted icon is amazing.  Choosing when to utilize icons to represent interfacing elements is paramount to whether users will understand, and seamlessly navigate areas of a website.

Previously, website icons consisted of small images, and sometimes image sprites. Creating and maintaining these images was cumbersome, and integration tedious at times.

Recently, icon fonts have paved the way for expedient delivery of icons. Libraries of font icons have become prevalent, one of which is Font Awesome.

Let’s get started with integrating Font Awesome icons with bbPress forums, but first I would like to point out this bbPress Trac ticket that created the filter necessary to add this functionality. This may be a helpful reference: “New Filters for Topic/Reply Admin Links.”

First we must enqueue the Font Awesome library script in our theme. Although, you could use a plugin: Font Awesome Icons, but we’re going to be smart about it since we’re going to be utilizing Font Awesome in other areas of our site, and keep it in our theme.

wp_enqueue to the rescue!

[snippet slug=register-and-enqueue-font-awesome line_numbers=false lang=php]

Drop that snippet in your theme’s functions.php file, and now we have Font Awesome loading on every page. (Of course, if you would like to limit loading to only the necessary pages you could use one of the many handy-dandy conditionals.)

We’re going to start by adding an icon to bbPress’s default ‘Edit’ link for a topic.

We’ll hook into the bbp_topic_admin_links filter and add our icon font, like so (again, functions.php):

[snippet slug=edit-icon-for-bbpress line_numbers=false lang=php]

That gives us this:

Now we’ll want to do the same for the reply to topic area by tying into the bbp_reply_admin_links filter so it’ll look like this:

We can hook into reply links with this (functions.php):

[snippet slug=edit-icon-for-bbpress-topic-reply line_numbers=false lang=bsh]

Of course, you can add an icon to any one of those links, and even replace the link altogether, like:

[snippet slug=icons-for-all-bbpress-admin-and-reply-links lang=bsh]

Which will give you this:

But that is just crazy TOWN! Would you know what each icon represented if you were a new user trying to interact with that forum? Me neither. So be careful when and where you use such a recipe (for disaster?).

Integrating icons into modern web interfaces is a continuing challenge that can be fun if used properly. Have fun!