FontAwesome

Font Awesome

So you want a rocket on your page to show how awesome your stuff is. Something like this: http://fontawesome.io/icon/rocket/

<i class="fa fa-rocket fa-6" aria-hidden="true"></i>

Is how to show a Font Awesome icon. Which looks like this:

How To

Adding Font Awesome used to be an extension that you could install. However, the source is no longer available, except as a GPL-violating purchase with no source; and the link doesn't even work.

Some would say that you can shim into OutputPage by calling a hook in your LocalSettings.php

$wgHooks['BeforePageDisplay'][] ='onBeforePageDisplay';

function onBeforePageDisplay( OutputPage &$out, Skin &$skin )
{
  $script = '<script type="text/javascript" src="https://use.fontawesome.com/14c71d3de0.js"></script>';
  $out->addHeadItem("wowhead script", $script);
  return true;
};

But that did not seem effective.

Then there is another extension called mw:Extension:PhpTags_Widgets. But installing that caused a fatal error in my wiki that I didn't have time to debug.

Another way to add a script is to modify MediaWiki:Common.js, but I ran into #Problems with that too.

/*To add <script src="https://use.fontawesome.com/14c71d3de0.js"></script>
   we use load instead of the deprecated importScriptURI */
mw.loader.load('//use.fontawesome.com/14c71d3de0.js');

I'll check into all the recent details of the 'ResourceLoader' mechanism, and write a new extension or update comments here.

Problems

But there is a dependency and some bugs that have to be tracked down with regard to using it on a wiki site.

1. Font Awesome only seems to work if there is an actual image on the page. For example, this is an edit icon from a normal svg file. . Remove that and your Font Awesome icon will disappear. Note: the image file doesn't even have to exist, it's just that the image processing code is not called unless there is a [[File:]] tag in the wikitext.
2. And FA doesn't work if I close the tag properly.
3. The fa element is duplicated throughout the rest of the page since it wasn't closed.

Getting it

1. Sign up for a unique embed code.
2. Add the script source to your wiki by editing the MediaWiki:Common.js file where you add a call to 'load' the external script mw.loader.load('//use.fontawesome.com/14c71d3de0.js');
3. Insert the <i> tags where ever you want. Note that there are various sizes pre-defined as fa-1 (smallest) to fa-6 (largest)
4. Check http://fontawesome.io/examples/
5. https://cdn.fontawesome.com/help#qa-icons-code
6. https://stackoverflow.com/questions/tagged/font-awesome
7. https://github.com/FortAwesome/Font-Awesome

General Public License = A sane copyright license

Uniform Resource Locator = an address of a web page or other component, including the protocol.