Difference between revisions of "FontAwesome"

From EUSwiki
Jump to: navigation, search
(How to Use FontAwesome)
Line 11: Line 11:
 
<code><nowiki><i class="fa fa-bank fa-5x"></i><br></nowiki></code>
 
<code><nowiki><i class="fa fa-bank fa-5x"></i><br></nowiki></code>
 
{{col-break}}
 
{{col-break}}
<i class="fa fa-bank fa-spin" style="color:DodgerBlue"></i><br>
+
<i class="fa fa-bank fa-spin fa-3x" style="color:DodgerBlue"></i><br>
<code><nowiki><i class="fa fa-bank fa-spin" style="color:DodgerBlue"></i></nowiki></code><br>
+
<code><nowiki><i class="fa fa-bank fa-spin fa-3x" style="color:DodgerBlue"></i></nowiki></code><br>
 
{{col-break}}
 
{{col-break}}
<i class="fa fa-bank fa-flip-vertical"></i><br>
+
<i class="fa fa-bank fa-flip-vertical fa-3x"></i><br>
 
<code><nowiki><i class="fa fa-bank fa-flip-vertical"></nowiki></code>
 
<code><nowiki><i class="fa fa-bank fa-flip-vertical"></nowiki></code>
 
{{col-break}}
 
{{col-break}}
<span class="fa-stack fa-lg">
+
<span class="fa-stack fa-lg fa-3x">
   <i class="fa fa-circle fa-stack-2x"></i>
+
   <i class="fa fa-circle fa-stack-3x"></i>
   <i class="fa fa-bank fa-stack-1x fa-inverse"></i>
+
   <i class="fa fa-bank fa-stack-2x fa-inverse"></i>
 
</span><br>
 
</span><br>
<code><nowiki><span class="fa-stack fa-lg">
+
<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>
  <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}}
 
{{col-end}}
  

Revision as of 14:27, 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