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-pull-left fa-5x fa-rocket" aria-hidden="true"></i>

Is how to show a Font Awesome icon, pulled to the left, 5x bigger than normal, and explicitly telling screen readers to ignore the item as decorative.

Bootstrap Example

     One of three columns

     Two of three columns

     Three of three columns

     Coffee

     I love coffee!!!

     cloud

     Cloud deployment means instantly available and scalable.  We can also do on-premise / local installations to meet your custom requirements.

     Blocks

     All the pieces are put together for you.  NO assembly required!

We specialize in Websites that are simple to use Collaboration / Data / Knowledge / Publishing / Docs systems Web Applications Development Operations

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.

The best way I've found 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.

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. That extension looks great (because it comes with stuff like Vega, and for other features too) and was recently updated to FontAwesome 4.5 But installing that caused a fatal error in my wiki that I didn't have time to debug.

Problems

There may be bugs that have to be tracked down with regard to using it on a wiki site.

1. The problems I originally encountered mysteriously disappeared. The main caveat being that FA does not preview. It only shows up on 'Save'.
2. 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. [[Image:Edit icon.svg|30px]]. 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.
3. And FA doesn't work if I close the tag properly.
4. 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 at the fontawesome website.
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)

More

1. Check http://fontawesome.io/examples/
2. http://fontawesome.io/icons/ The icons (Note there is a new kickstarter for a Pro product https://www.kickstarter.com/projects/232193852/font-awesome-5)
3. https://cdn.fontawesome.com/help#qa-icons-code
4. https://stackoverflow.com/questions/tagged/font-awesome
5. https://github.com/FortAwesome/Font-Awesome

Other Extensions

There is also an older 'bootstrap-mediawiki' extension which uses Bootstrap 3 and FontAwesome 4 https://github.com/borkweb/bootstrap-mediawiki