Bureaucrats, confirmed, Administrators
4,558
edits
Changes
Jump to navigation
Jump to search
version for book
== 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
<nowiki><i class="fa fa-pull-left fa-5x fa-rocket" aria-hidden="true"></i></nowiki>
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. <i class="fa fa-pull-left fa-5x fa-rocket" aria-hidden="true"></i>
== Bootstrap ==
If your wiki uses a '''bootstrap''' compatible theme like [[mw:Skin:Foreground|Foreground]] (FontAwesome 4.3) or [[mw:Skin:Chameleon|Chameleon]], then you can also mix-in '''layouts''' like this (won't work with Vector):
=== Bootstrap Example ===
<div class="container">
<div class="row">
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
Two of three columns
</div>
<div class="col-sm-4">
Three of three columns
</div>
</div>
<div class="row">
<div class="col-sm-4">
<i class="fa fa-pull-left fa-5x fa-coffee" aria-hidden="true"></i>
</div>
<div class="col-sm-4">
Coffee
</div>
<div class="col-sm-4">
I love coffee!!!
</div>
</div>
<div class="row">
<div class="col-sm-4">
<i class="fa fa-pull-left fa-5x fa-cloud" aria-hidden="true"></i>
</div>
<div class="col-sm-4">
cloud
</div>
<div class="col-sm-4">
Cloud deployment means instantly available and scalable. We can also do on-premise / local installations to meet your custom requirements.
</div>
</div>
<div class="row">
<div class="col-sm-4">
<i class="fa fa-pull-left fa-5x fa-cubes" aria-hidden="true"></i>
</div>
<div class="col-sm-4">
Blocks
</div>
<div class="col-sm-4">
All the pieces are put together for you. NO assembly required!
</div>
</div>
</div>
We specialize in
<div><i class="fa fa-pull-left fa-5x fa-wordpress" aria-hidden="true"></i>Websites that are simple to use</div>
<div><i class="fa fa-pull-left fa-5x fa-wikipedia-w" aria-hidden="true"></i>Collaboration / Data / Knowledge / Publishing / Docs systems</div>
<div><i class="fa fa-pull-left fa-5x fa-drupal" aria-hidden="true"></i>Web Applications</div>
<div><i class="fa fa-pull-left fa-5x fa-sprocket" aria-hidden="true"></i>Development Operations</div>
== How To ==
The best way I've found is to modify [[MediaWiki:Common.js]]
<source lang=javascript>
/*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');
</source>
Note that the deprecated $wgUseTidy can interfere with FontAwesome by removing the empty tags.
=== Recipe ===
# Sign up for a unique embed code at the fontawesome website.
# Add the script source to your wiki by editing the [[MediaWiki:Common.js]] file where you add a call to 'load' the external script
# Insert the <code><nowiki><i></nowiki></code> tags where ever you want. Note that there are various sizes pre-defined as fa-1 (smallest) to fa-6 (largest)
== More ==
# Check http://fontawesome.io/examples/
# 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)
# https://cdn.fontawesome.com/help#qa-icons-code
# https://stackoverflow.com/questions/tagged/font-awesome
# 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.
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
<nowiki><i class="fa fa-pull-left fa-5x fa-rocket" aria-hidden="true"></i></nowiki>
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. <i class="fa fa-pull-left fa-5x fa-rocket" aria-hidden="true"></i>
== Bootstrap ==
If your wiki uses a '''bootstrap''' compatible theme like [[mw:Skin:Foreground|Foreground]] (FontAwesome 4.3) or [[mw:Skin:Chameleon|Chameleon]], then you can also mix-in '''layouts''' like this (won't work with Vector):
=== Bootstrap Example ===
<div class="container">
<div class="row">
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
Two of three columns
</div>
<div class="col-sm-4">
Three of three columns
</div>
</div>
<div class="row">
<div class="col-sm-4">
<i class="fa fa-pull-left fa-5x fa-coffee" aria-hidden="true"></i>
</div>
<div class="col-sm-4">
Coffee
</div>
<div class="col-sm-4">
I love coffee!!!
</div>
</div>
<div class="row">
<div class="col-sm-4">
<i class="fa fa-pull-left fa-5x fa-cloud" aria-hidden="true"></i>
</div>
<div class="col-sm-4">
cloud
</div>
<div class="col-sm-4">
Cloud deployment means instantly available and scalable. We can also do on-premise / local installations to meet your custom requirements.
</div>
</div>
<div class="row">
<div class="col-sm-4">
<i class="fa fa-pull-left fa-5x fa-cubes" aria-hidden="true"></i>
</div>
<div class="col-sm-4">
Blocks
</div>
<div class="col-sm-4">
All the pieces are put together for you. NO assembly required!
</div>
</div>
</div>
We specialize in
<div><i class="fa fa-pull-left fa-5x fa-wordpress" aria-hidden="true"></i>Websites that are simple to use</div>
<div><i class="fa fa-pull-left fa-5x fa-wikipedia-w" aria-hidden="true"></i>Collaboration / Data / Knowledge / Publishing / Docs systems</div>
<div><i class="fa fa-pull-left fa-5x fa-drupal" aria-hidden="true"></i>Web Applications</div>
<div><i class="fa fa-pull-left fa-5x fa-sprocket" aria-hidden="true"></i>Development Operations</div>
== How To ==
The best way I've found is to modify [[MediaWiki:Common.js]]
<source lang=javascript>
/*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');
</source>
Note that the deprecated $wgUseTidy can interfere with FontAwesome by removing the empty tags.
=== Recipe ===
# Sign up for a unique embed code at the fontawesome website.
# Add the script source to your wiki by editing the [[MediaWiki:Common.js]] file where you add a call to 'load' the external script
# Insert the <code><nowiki><i></nowiki></code> tags where ever you want. Note that there are various sizes pre-defined as fa-1 (smallest) to fa-6 (largest)
== More ==
# Check http://fontawesome.io/examples/
# 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)
# https://cdn.fontawesome.com/help#qa-icons-code
# https://stackoverflow.com/questions/tagged/font-awesome
# 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.
