Open main menu

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/

If your wiki supports Font Awesome, then it's as easy as <i class="fa fa-pull-left fa-5x fa-rocket" aria-hidden="true"></i>

That 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

If your wiki uses a bootstrap compatible theme like Foreground (FontAwesome 4.3) or Chameleon, then you can also mix-in layouts like this (won't work with Vector):

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

The best way I've found is to modify MediaWiki:Common.js

/*To add script tags to the page we use load instead of the deprecated importScriptURI */
/* You'll need to visit the fontawesome site to get a KEY to use */
mw.loader.load('//use.fontawesome.com/aldfjsdlkfjdlskf0.js');

Note that the deprecated $wgUseTidy can interfere with FontAwesome by removing the empty tags.

Recipe

  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
  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

Disclaimer

At the time of writing, this site doesn't support FontAwesome icons, nor Bootstrap layouts. But now that the sample code is in place, we'll try the recipe.

Return to "FontAwesome" page.