FontAwesome: Difference between revisions

From EUSwiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
__NOTOC__
==How to Use FontAwesome==
To insert any icon [[FontAwesome#Icons|listed below]], use the following syntax:
<center><code style="font-size:16px;"><nowiki><i class="</nowiki><span style="color:Crimson";>fa</span> <span style="color:RoyalBlue">fa-certificate</span><nowiki>"></i></nowiki></code></center>
Where <span style="color:Crimson";>fa</span> calls for the fontawesome pack, and <span style="color:RoyalBlue">fa-certificate</span> is the icon of choice.
===Features===
The icons can be further adjusted to meet new sizes, to be used as bullet points, and to be rotated dynamically. [http://fontawesome.io/examples/ Click here] to find out more:
{{col-begin}}
{{col-break}}
<i class="fa fa-bank fa-5x"></i><br>
<code><nowiki><i class="fa fa-bank fa-5x"></i><br></nowiki></code>
{{col-break}}
<i class="fa fa-bank fa-spin" style="color:DodgerBlue"></i><br>
<code><nowiki><i class="fa fa-bank fa-spin" style="color:DodgerBlue"></i></nowiki></code><br>
{{col-break}}
<i class="fa fa-bank fa-flip-vertical"></i><br>
<code><nowiki><i class="fa fa-bank fa-flip-vertical"></nowiki></code>
{{col-break}}
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-bank fa-stack-1x fa-inverse"></i>
</span><br>
<code><nowiki><span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-bank fa-stack-1x fa-inverse"></i>
</span></nowiki></code>
{{col-end}}
==Icons==
{{col-begin}}
{{col-begin}}
{{col-break}}
{{col-break}}

Revision as of 14:26, 9 October 2016

How to Use FontAwesome

To insert any icon listed below, use the following syntax:

<i class="fa fa-certificate"></i>

Where fa calls for the fontawesome pack, and fa-certificate is the icon of choice.

Features

The icons can be further adjusted to meet new sizes, to be used as bullet points, and to be rotated dynamically. Click here to find out more:

Icons