Difference between revisions of "FontAwesome"
Jump to navigation
Jump to search
| (7 intermediate revisions by the same 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/ | ||
| − | |||
| − | |||
<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> | ||
| − | + | 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> | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
== How To == | == How To == | ||
Adding Font Awesome used to be an extension that you could install<ref>Extension:FontAwesome has been stagnant since 2014 and the developer has been changing around URLs with the current pay link saying it's "out of stock"!? Really, you ran out of source code?</ref>. However, the source is no longer available, except as a GPL-violating purchase with no source; and the link doesn't even work. | Adding Font Awesome used to be an extension that you could install<ref>Extension:FontAwesome has been stagnant since 2014 and the developer has been changing around URLs with the current pay link saying it's "out of stock"!? Really, you ran out of source code?</ref>. However, the source is no longer available, except as a GPL-violating purchase with no source; and the link doesn't even work. | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
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 | ||
| Line 91: | Line 25: | ||
But that did not seem effective. | But that did not seem effective. | ||
| − | Then there is another extension called [[mw:Extension:PhpTags_Widgets]]. | + | Then there is another extension called [[mw:Extension:PhpTags_Widgets]]. But installing that caused a fatal error in my wiki that I didn't have time to debug. |
| + | |||
| + | Another way to add a script 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> | ||
| + | we use load instead of the deprecated importScriptURI */ | ||
| + | mw.loader.load('//use.fontawesome.com/14c71d3de0.js'); | ||
| + | </source> | ||
| + | |||
| + | 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. | ||
=== Problems === | === Problems === | ||
| − | + | But there is a dependency and some bugs that have to be tracked down with regard to using it on a wiki site. | |
| − | + | # The problems seem to have disappeared with the main caveat being that the icon does not preview. It only shows up on 'Save'. | |
| − | # | + | # 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. |
| − | # | + | # And FA doesn't work if I close the tag properly. |
| − | # | + | # The '''fa''' element is duplicated throughout the rest of the page since it wasn't closed. |
| − | # | ||
=== Getting it === | === Getting it === | ||
| − | # Sign up for a unique embed code | + | # Sign up for a unique embed code. |
# Add the script source to your wiki by editing the [[MediaWiki:Common.js]] file where you add a call to 'load' the external script <code><nowiki>mw.loader.load('//use.fontawesome.com/14c71d3de0.js');</nowiki></code> | # Add the script source to your wiki by editing the [[MediaWiki:Common.js]] file where you add a call to 'load' the external script <code><nowiki>mw.loader.load('//use.fontawesome.com/14c71d3de0.js');</nowiki></code> | ||
# 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) | # 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) | ||
| − | |||
| − | |||
# Check http://fontawesome.io/examples/ | # Check http://fontawesome.io/examples/ | ||
| − | |||
# https://cdn.fontawesome.com/help#qa-icons-code | # https://cdn.fontawesome.com/help#qa-icons-code | ||
# https://stackoverflow.com/questions/tagged/font-awesome | # https://stackoverflow.com/questions/tagged/font-awesome | ||
# https://github.com/FortAwesome/Font-Awesome | # https://github.com/FortAwesome/Font-Awesome | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
[[Category:Wiki]] | [[Category:Wiki]] | ||
[[Category:QualityBox]] | [[Category:QualityBox]] | ||
Revision as of 10:53, 17 November 2016
Contents
Font Awesome[edit | edit source]
So you want a rocket on your page to show how awesome your stuff is. Something like this: http://fontawesome.io/icon/rocket/
<i class="fa fa-pull-left fa-5x fa-rocket" aria-hidden="true"></i>
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.
How To[edit | edit source]
Adding Font Awesome used to be an extension that you could install[1]. However, the source is no longer available, except as a GPL-violating purchase with no source; and the link doesn't even work.
Some would say that you can shim into OutputPage by calling a hook in your LocalSettings.php
$wgHooks['BeforePageDisplay'][] ='onBeforePageDisplay';
function onBeforePageDisplay( OutputPage &$out, Skin &$skin )
{
$script = '<script type="text/javascript" src="https://use.fontawesome.com/14c71d3de0.js"></script>';
$out->addHeadItem("wowhead script", $script);
return true;
};
But that did not seem effective.
Then there is another extension called mw:Extension:PhpTags_Widgets. But installing that caused a fatal error in my wiki that I didn't have time to debug.
Another way to add a script is to modify MediaWiki:Common.js, but I ran into #Problems with that too.
/*To add <script src="https://use.fontawesome.com/14c71d3de0.js"></script>
we use load instead of the deprecated importScriptURI */
mw.loader.load('//use.fontawesome.com/14c71d3de0.js');
I'll check into all the recent details of the 'ResourceLoader' mechanism, and write a new extension or update comments here.
Problems[edit | edit source]
But there is a dependency and some bugs that have to be tracked down with regard to using it on a wiki site.
- The problems seem to have disappeared with the main caveat being that the icon does not preview. It only shows up on 'Save'.
- 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. [[Image:Edit icon.svg|30px]]. 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 [[File:]] tag in the wikitext.
- And FA doesn't work if I close the tag properly.
- The fa element is duplicated throughout the rest of the page since it wasn't closed.
Getting it[edit | edit source]
- Sign up for a unique embed code.
- Add the script source to your wiki by editing the MediaWiki:Common.js file where you add a call to 'load' the external script
mw.loader.load('//use.fontawesome.com/14c71d3de0.js'); - Insert the
<i>tags where ever you want. Note that there are various sizes pre-defined as fa-1 (smallest) to fa-6 (largest) - Check http://fontawesome.io/examples/
- https://cdn.fontawesome.com/help#qa-icons-code
- https://stackoverflow.com/questions/tagged/font-awesome
- https://github.com/FortAwesome/Font-Awesome
- ↑ Extension:FontAwesome has been stagnant since 2014 and the developer has been changing around URLs with the current pay link saying it's "out of stock"!? Really, you ran out of source code?
