Font-Awesome icons not showing -- missing class=fa?

Question

The Font-Awesome icons are not showing properly. I believe this is because the required class "fa" is missing everywhere where one of the icons is supposed to display. I have tested this by modifying templates/CRM/common/fatal.tpl, adding "fa" in the appropriate place in line 49. Without the fa class the browser shows a blob character; with the fa class the correct icon shows as desired. Quite a number of templates are affected (assuming I am correct).

I'm running CiviCRM 4.7.23 (with no local customization) on Drupal 7.56.

Answer 1

It sounds like you've identified a bug — and found a fix. Excellent!

I can confirm this bug by observing the fatal error message displaying a funky character before "Sorry" as shown below.

Here are some next steps that I'd recommend for you here:

1. Report the bug in CiviCRM's issue-tracker, Jira. If you're new to reporting issues, read over these issue-reporting guidelines in our Developer Guide.
2. After reporting the bug, you can choose to stop there and wait for someone else to fix it. But, given that this issue has a relatively minor impact, developers will be unlikely to volunteer their time on it unless you offer funding to the Core Team or to an independent expert.

3. Since you've already dug into the code yourself, I'd encourage you to work on contributing a fix. Here are some tips:

   • Use git blame (possibly via GitHub's web-based git blame) on that line of code to see if there are recent commits which are relevant to the issue. Ah ha! In this case we can see that someone recently made a change to "use class crm-i instead of fa".

   • It would be prudent to look deeper into that commit to try and understand it. I haven't gone too deep, but I did notice that the commit also changed the warning at the top of the "Option Groups" page (/civicrm/admin/options?reset=1), and that message seems to be displaying okay right now:

     

   • From the above, I'd recommend considering whether your fix should be limited only to the fatal error page (which might be behaving differently than other pages due to different CSS being included in it)

   • If you're stuck or want input from other developers, hop on Mattermost.

All-in-all, this answer is just intended to be a push in the right direction towards using other tools (i.e. Jira, GitHub, and Mattermost instead of StackExchange) for reporting (and hopefully fixing) this bug. In some ways you're lucky to have found a bug which will (probably) be super easy to fix! Fixing this bug would be a great stepping stone towards improving CiviCRM in bigger ways too!

Answer 2

Sean provided an excellent answer for dealing with the bug on the fatal error page.

Here, I'm just addressing the question of why the fa class is missing. You noticed that none of CiviCRM's icons have it.

CiviCRM is different from many systems because it's subject to a wide variety of CMS themes and settings where it's installed. When we went to set up Font Awesome, the icon library used in 4.7, Coleman and I were concerned that there could be a clash between CiviCRM's implementation of Font Awesome and one potentially used by the CMS.

For example, Font Awesome 5 is coming soon, advertising all new icons. While I'd hope that the characters used for each icon would be the same in the new font, there's no guarantee that they would be: the class name is intended to be the identifier. If CiviCRM expected Font Awesome 4 and the CMS used 5, or vice-versa, using the fa class could yield inconsitent results. We chose to use crm-i instead.

The separate class also gives us more flexibility on custom icons. We can create new icons and tie them to the crm-i class along with a specific icon name class, and they'll be treated the same as our off-the-shelf icons. If later versions of Font Awesome include an icon with the same name, we can safely continue as-is without messing up parts of the CMS thst might use that new icon.