Blogs

Introduction

In my last blog post I had a little rant about the old version of Font Awesome included with Liferay 6.2 and how it would always be out of date because they seem to keep adding new glyphs every day.

So I wondered if it was possible to use the current Font Awesome in a theme and started down a path to test it out.

Font Awesome

For those that don't know, Font Awesome is basically a custom font made from SVG images.  It's awesome in that SVG images scale to practically any size yet still keep nice curves and won't pixelate on you.

By using Font Awesome, you get a catalog of canned images for all kinds of standard buttons that you see on a desktop application or on a web page plus a long list of others.

In Liferay 6.2 they added Font Awesome 3.2.1 into the mix.  At this point in time it is two years old and, although it still works, the set of available glyphs (361 of them) is smaller than the current 4.3.0's 519 glyphs.

Now I can't really comment on how useful the 519 glyphs are.  I really doubt I'll ever have a need for the new viacoin glyph, for example.  But I do want to know if I need it if I can use it or not.

Creating the Theme

Start by creating a new theme project for Liferay 6.2.  To keep the theme simple, use classic as the parent for the theme.

Download and expand the latest version of Font Awesome; I'm using 4.3.0.

From your Font Awesome directory (mine is font-awesome-4.3.0), copy the css and fonts folder to your theme.  If using Maven, you'll copy them to the src/main/webapp directory of your font.  If using the SDK, you'll copy them to the docroot/_diffs folder.

To keep the theme changes as simple as possible, copy the css/main.css from the _styled theme into your new theme's css folder.  Edit this file to add the font-awesome.css line to the end of the file:

@import url(font-awesome.css);

Once you've tested your theme out, you might want to switch over to font-awesome.min.css, but Liferay will already be minimizing the css on the fly so this is not really necessary.

At this point your theme project is done.  Build and deploy it to prepare for the next step.

Testing Font Awesome

So testing is actually pretty easy.  Create a new page in your portal somewhere (doesn't matter where) and use your new theme for the page and, to keep things really simple, use a 1 column layout.

Drop a Web Content Display portlet on the page and create a new web content article.  For the body of the article, click the "Source" button and set it to the following:

<div><i class="fa fa-3x fa-coffee"></i></div>

Publish the article to see your FA Coffee Cup:

Drop another Web Content Display portlet on the page and create a new article.  For the body of the article, click on the "Source" button and then grab the HTML fragment from the attached file (there's over 500 glyphs so I didn't want to put all of that content here into the blog) and past it in.

And before you say anything, yes I know it's a table and we don't do those anymore because they are not responsive.  I went with a table because this is just to show that Font Awesome is working in the theme, it's not trying to show the best way to put a table into your journal articles.

When you publish the article and return to your portal, voila, you can see all of the available Font Awesome 4.3.0 glyphs!

Conclusion

So it is possible to use the latest Font Awesome in your themes, leveraging all of the latest glyphs.

What's more, FA has some other similar glyphs as fonts from FontIcons.com.  It just so happens that those, too, can be integrated into a theme in the same way we just added Font Awesome into a theme.  Note that I'm not really selling FontIcons or anything, I'm just providing choice and affirmation that, should you need/want FontIcons, they'll work in your theme too.

So at one point I also wondered if it would be possible to upgrade Alloy's older Font Awesome 3.2.1 to the latest 4.3.0.  The simple answer is no.  For the Font Awesome 4 release, the classes changed from "icon-coffee" to a better namespaced "fa-coffee".  Some of the supported stylings also changed.  So Alloy's use of Font Awesome 3 cannot easily be adapted to use Font Awesome 4.

That said, it cannot be ruled out entirely.  I'm sure if you had enough time and energy, you could either rework all of the Font Awesome 4 class names to match the Font Awesome 3 names and then replace Alloy's older FA files with the hacked versions, but what an ugly hack that is.  A better path but one I haven't tried would be to override how Alloy pulls in and uses the FA 3 files and have it pull in and use the FA 4 files instead (I think all it would take is tweaking the Font Awesome 3 stuff pulled in via aui.css from styles that have _styled as a parent (or grandparent or great-grandparent, etc.) and have it pull in the FA 4 stuff instead).