Bureaucrats, confirmed, Administrators
4,558
edits
Changes
Jump to navigation
Jump to search
Is 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>
no edit summary
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>
If your wiki uses a theme like [[mw:Skin:Foreground|Foreground]] (FontAwesome 4.3) or [[Chameleon]] that is bootstrap compatible, then you can also mix-in layouts like this (won't work with Vector):
== Bootstrap Example ==
<div class="container">
</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-sprocketssprocket" aria-hidden="true"></i>Development Operations</div>
The best way I've found is to modify [[MediaWiki:Common.js]], but I ran into [[#Problems]] with that too.
<source lang=javascript>
/*To add <script src="https://use.fontawesome.com/14c71d3de0.js"></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/14c71d3de0aldfjsdlkfjdlskf0.js');
</source>
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 [https://vega.github.io/vega/ Vega], and for other features too) and was recently updated to FontAwesome 4.5<ref>https://gerrit.wikimedia.org/r/#/q/project:mediawiki/extensions/PhpTagsWidgets,n,z</ref> But installing that caused has a fatal error bunch of dependencies on other extensions by the same author; which are marked experimental; and which go deep into murky waters that are not remotely connected to simply getting FontAwesome in my your wiki that I didn't have time . In short: Interesting stuff; not the best way to debugget FontAwesome.
=== Problems ===
There may be bugs that have to be tracked down with regard to using it on a wiki site.
It turns out that Tidy was interfering with FontAwesome by removing the empty tags.# <strike>The problems I originally encountered mysteriously disappeared. The main caveat being that FA does not preview. It only shows up on 'Save'.</strike>
# <strike>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. <nowiki>[[Image:Edit icon.svg|30px]]</nowiki>. 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 <nowiki>[[File:]]</nowiki> tag in the wikitext.</strike>
# <strike>And FA doesn't work if I close the tag properly. </strike>
There is also an older 'bootstrap-mediawiki' extension which uses Bootstrap 3 and FontAwesome 4
https://github.com/borkweb/bootstrap-mediawiki
{{References}}
[[Category:Wiki]]
[[Category:QualityBox]]
