From Freephile Wiki
Jump to navigation Jump to search

Font Awesome[edit source]

So you want a rocket on your page to show how awesome your stuff is. Something like this:

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[edit source]

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[edit source]

     One of three columns
     Two of three columns
     Three of three columns
     I love coffee!!!
     Cloud deployment means instantly available and scalable.  We can also do on-premise / local installations to meet your custom requirements.
     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[edit source]

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

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

Recipe[edit source]

  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[edit source]

  1. Check
  2. The icons (Note there is a new kickstarter for a Pro product

Disclaimer[edit source]

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.