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/

Is how to show a '''Font Awesome''' icon. ~~Which looks like this:~~

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.

Line 38:

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

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

@@ 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/
-<nowiki><i class="fa fa-rocket fa-6" 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. Which looks like this: <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.<i class="fa fa-pull-left fa-5x fa-rocket" aria-hidden="true"></i>
@@ Line 38: / Line 38: @@
 === 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.
+# 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 ===