FontAwesome: Difference between revisions
No edit summary |
m Text replacement - "<(\/?)source" to "<$1syntaxhighlight" Tags: Mobile edit Mobile web edit |
||
| (5 intermediate revisions by one other user not shown) | |||
| Line 2: | Line 2: | ||
So you want a rocket on your page to show how awesome your stuff is. Something like this: http://fontawesome.io/icon/rocket/ | 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> | <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> | |||
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 == | == Bootstrap Example == | ||
<div class="container"> | <div class="container"> | ||
| Line 55: | Line 57: | ||
</div> | </div> | ||
<i class="fa fa-pull-left fa-5x fa- | 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> | |||
| Line 62: | Line 68: | ||
The best way I've found is to modify [[MediaWiki:Common.js]], but I ran into [[#Problems]] with that too. | The best way I've found is to modify [[MediaWiki:Common.js]], but I ran into [[#Problems]] with that too. | ||
< | <syntaxhighlight lang=javascript> | ||
/*To add | /*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/ | mw.loader.load('//use.fontawesome.com/aldfjsdlkfjdlskf0.js'); | ||
</ | </syntaxhighlight> | ||
I'll check into all the recent details of the '[https://www.mediawiki.org/wiki/ResourceLoader ResourceLoader]' mechanism, and write a new extension or update comments here. | I'll check into all the recent details of the '[https://www.mediawiki.org/wiki/ResourceLoader ResourceLoader]' mechanism, and write a new extension or update comments here. | ||
| Line 72: | Line 78: | ||
Some would say that you can shim into [https://doc.wikimedia.org/mediawiki-core/master/php/classOutputPage.html OutputPage] by calling a hook in your LocalSettings.php | Some would say that you can shim into [https://doc.wikimedia.org/mediawiki-core/master/php/classOutputPage.html OutputPage] by calling a hook in your LocalSettings.php | ||
< | <syntaxhighlight lang=php> | ||
$wgHooks['BeforePageDisplay'][] ='onBeforePageDisplay'; | $wgHooks['BeforePageDisplay'][] ='onBeforePageDisplay'; | ||
| Line 81: | Line 87: | ||
return true; | return true; | ||
}; | }; | ||
</ | </syntaxhighlight> | ||
But that did not seem effective. | 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 | 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 has a 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 your wiki. In short: Interesting stuff; not the best way to get FontAwesome. | ||
=== Problems === | === Problems === | ||
There may be bugs that have to be tracked down with regard to using it on a wiki site. | There may be bugs that have to be tracked down with regard to using it on a wiki site. | ||
# The problems I originally encountered mysteriously disappeared. The main caveat being that FA does not preview. It only shows up on 'Save'. | 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>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> | # <strike>And FA doesn't work if I close the tag properly. </strike> | ||