A very simple extension that allows for the addition of Font Awesome anywhere within Mediawiki. When used with the MegaMenu extension the icons can be used to style menu items in addition to styling within articles.
Users wanting to use Font Awesome without MegaMenu can download the stand alone version from SourceForge.
Installation instructions for the stand alone version at the bottom of the page.
The table below is an example of how Font Awesome is displayed without any extra CSS styling.
| fa-automobile | fa-bank | fa-behance | fa-behance-square |
| fa-bomb | fa-building | fa-cab | fa-car |
| fa-child | fa-circle-o-notch | fa-circle-thin | fa-codepen |
| fa-cube | fa-cubes | fa-database | fa-delicious |
The table below is an example of how Font Awesome is displayed when placed between h4 tags.
fa-automobile |
fa-bank |
fa-behance |
fa-behance-square |
fa-bomb |
fa-building |
fa-cab |
fa-car |
fa-child |
fa-circle-o-notch |
fa-circle-thin |
fa-codepen |
fa-cube |
fa-cubes |
fa-database |
fa-delicious |
The table below is an example of how Font Awesome is displayed when placed between h4 tags with an extra coloured class.
fa-automobile |
fa-bank |
fa-behance |
fa-behance-square |
fa-bomb |
fa-building |
fa-cab |
fa-car |
fa-child |
fa-circle-o-notch |
fa-circle-thin |
fa-codepen |
fa-cube |
fa-cubes |
fa-database |
fa-delicious |
Whenever you wish to add a Font Awesome Icon add the following;
<i class="fa fa-car"></i> FooThis will display as;
Foo
A practical example (Social Sharing) of how you can use this extension can be seen at the bottom of the page, which was achieved by simply increasing the h6 font size to 100px and adding a:hover and a:focus styling with color: #103248;.
A few lines of JavaScript are included to open a small sharing window, click to see it working. To add this functionality view the source and copy and paste into your own page.
A complete list of the icons can be found at the Font Awesome website.
Support, queries and questions requests via the contact page (above).
Download and extract the file(s) in a directory called FontAwesome in your extensions/ folder.
Add the following code at the bottom of your LocalSettings.php:
require_once( "$IP/extensions/FontAwesome/FontAwesome.php" );Find the following (around line 73);
$out->addModuleStyles( $styles );
And directly below paste;
$out->addModuleStyles( 'ext.FontAwesome' );
Return to MediaWiki refresh the browser (Shift + Ctrl + R for Chrome and Firefox).
If there's a problem navigate to "Special:Version" on your Wiki to verify that the extension is successfully installed. Problems are normally due to mistakes editing Vector!