Difference between revisions of "FontAwesome"

From Freephile Wiki
Jump to navigation Jump to search
VisualWikitext
(notes about using Font Awesome)
(11 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-rocket fa-6" aria-hidden="true"></i></nowiki>
  
−
If your wiki supports Font Awesome, then it's as easy as
+
Is how to show a '''Font Awesome''' icon. Which looks like this: <i class="fa fa-pull-left fa-rocket" aria-hidden="true"></i>
−
<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 ==
 
−
<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 ==
 
−
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.
 
−
 
 
−
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 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>
 
−
 
 
−
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.
 
−
 
 
−
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
 
−
 
 
−
<source lang=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;
 
−
};
 
−
</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 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.  
+
But there is a dependency and some 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.
+
# 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.
−
# <strike>The problems I originally encountered mysteriously disappeared. The main caveat being that FA does not preview.  It only shows up on 'Save'.</strike>
+
# And FA doesn't work if I close the tag properly.   
−
# <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>
+
# The '''fa''' element is duplicated throughout the rest of the page since it wasn't closed.   
−
# <strike>And FA doesn't work if I close the tag properly.  </strike>
 
−
# <strike>The '''fa''' element is duplicated throughout the rest of the page since it wasn't closed.  </strike>
 
−
 
 
  
 
=== Getting it ===
 
=== Getting it ===
−
# Sign up for a unique embed code at the fontawesome website.
+
# 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)
−
 
−
== More ==
 
 
# Check http://fontawesome.io/examples/  
 
# 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://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
−
 
−
== Other Extensions ==
 
−
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]]
 

Revision as of 09:33, 17 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.

  1. 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. OOjs UI icon edit-ltr.svg. 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.
  2. And FA doesn't work if I close the tag properly.
  3. The fa element is duplicated throughout the rest of the page since it wasn't closed.

Getting it[edit | edit source]

  1. Sign up for a unique embed code.
  2. 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');
  3. Insert the <i> tags where ever you want. Note that there are various sizes pre-defined as fa-1 (smallest) to fa-6 (largest)
  4. Check http://fontawesome.io/examples/
  5. https://cdn.fontawesome.com/help#qa-icons-code
  6. https://stackoverflow.com/questions/tagged/font-awesome
  7. https://github.com/FortAwesome/Font-Awesome
Retrieved from "https://wiki.freephile.org/wiki/index.php?title=FontAwesome&oldid=7741"