FontAwesome: Difference between revisions

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/

If your wiki supports Font Awesome, then it's as easy as

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>

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 ==

Line 56:

Line 58:

We specialize in

<i class="fa fa-pull-left fa-5x fa-wordpress" aria-hidden="true"></i>Websites that are simple to use

<div><i class="fa fa-pull-left fa-5x fa-wordpress" aria-hidden="true"></i>Websites that are simple to use</div>

<i class="fa fa-pull-left fa-5x fa-wikipedia-w" aria-hidden="true"></i>Collaboration / Data / Knowledge / Publishing / Docs systems

<div><i class="fa fa-pull-left fa-5x fa-wikipedia-w" aria-hidden="true"></i>Collaboration / Data / Knowledge / Publishing / Docs systems</div>

<i class="fa fa-pull-left fa-5x fa-drupal" aria-hidden="true"></i>Web Applications

<div><i class="fa fa-pull-left fa-5x fa-drupal" aria-hidden="true"></i>Web Applications</div>

<i class="fa fa-pull-left fa-5x fa-~~sprockets~~" aria-hidden="true"></i>Development Operations

<div><i class="fa fa-pull-left fa-5x fa-sprocket" aria-hidden="true"></i>Development Operations</div>

@@ 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/
+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>
-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>
+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">
@@ Line 56: / Line 58: @@
 We specialize in
-<i class="fa fa-pull-left fa-5x fa-wordpress" aria-hidden="true"></i>Websites that are simple to use
+<div><i class="fa fa-pull-left fa-5x fa-wordpress" aria-hidden="true"></i>Websites that are simple to use</div>
-<i class="fa fa-pull-left fa-5x fa-wikipedia-w" aria-hidden="true"></i>Collaboration / Data / Knowledge / Publishing / Docs systems
+<div><i class="fa fa-pull-left fa-5x fa-wikipedia-w" aria-hidden="true"></i>Collaboration / Data / Knowledge / Publishing / Docs systems</div>
-<i class="fa fa-pull-left fa-5x fa-drupal" aria-hidden="true"></i>Web Applications
+<div><i class="fa fa-pull-left fa-5x fa-drupal" aria-hidden="true"></i>Web Applications</div>
-<i class="fa fa-pull-left fa-5x fa-sprockets" aria-hidden="true"></i>Development Operations
+<div><i class="fa fa-pull-left fa-5x fa-sprocket" aria-hidden="true"></i>Development Operations</div>