Difference between revisions of "QualityBox"
Jump to navigation
Jump to search
| (11 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
| − | + | == 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/ | |
| − | |||
| − | |||
| − | < | + | <nowiki><i class="fa fa-rocket fa-6" aria-hidden="true"></i></nowiki> |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | </ | ||
| − | + | Is how to show a '''Font Awesome''' icon. Which looks like this: <i class="fa fa-rocket fa-6" aria-hidden="true"> | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | === Problems === | |
| − | + | But there is a dependency and some bugs that have to be tracked down with regard to using it on a wiki site. | |
| − | + | # 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 <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 === | |
| − | + | # 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> | |
| − | < | + | # 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) |
| − | < | ||
| − | </ | ||
| − | |||
| − | |||
| − | |||
| − | < | ||
| − | < | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Revision as of 11:33, 16 November 2016
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-rocket fa-6" aria-hidden="true"></i>
Is how to show a Font Awesome icon. Which looks like this:
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.
- 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.
. 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)
