Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><a href="http://fortawesome.github.com/Font-Awesome/" rel="nofollow noreferrer">Font Awesome</a> is an iconic font developed for use with the <a href="http://getbootstrap.com/" rel="nofollow noreferrer">Twitter Bootstrap</a> front-end framework.</p> <p>Font Awesome is currently on version 4.7. For those who haven't updated or are unable to update to the latest version, the version 3.2.1 documentation is available <a href="http://fortawesome.github.io/Font-Awesome/3.2.1/" rel="nofollow noreferrer">here</a>. To differentiate between versions look for the <code>fa fa-[name]</code> for ver 4.x, and <code>icon-[name]</code> for ver 3.x.</p> <p>Version 4.1 was the first Font Awesome version that drops support of IE7 entirely, so you <strong>should not</strong> upgrade to it or any later version if your application must support IE7 browser.</p> <p>Current version provides <a href="http://fortawesome.github.io/Font-Awesome/icons/" rel="nofollow noreferrer">675 font-icons</a> in 16 groups (including 41 new icons in 4.7 branch):</p> <ul> <li>Web Application Icons</li> <li>Accessibility Icons</li> <li>Hand Icons</li> <li>Transportation Icons</li> <li>Gender Icons</li> <li>File Type Icons</li> <li>Spinner Icons</li> <li>Form Control Icons</li> <li>Payment Icons</li> <li>Chart Icons</li> <li>Currency Icons</li> <li>Text Editor Icons</li> <li>Directional Icons</li> <li>Video Player Icons</li> <li>Brand Icons</li> <li>Medical Icons</li> </ul> <p>Font Awesome is purely built using scalable vector graphics, so it provides clear, smooth and scalable icons for use in different browsers and on different devices. </p> <p>You can <em>subset</em> font-awesome using either <a href="https://github.com/johnsmclay/icnfnt" rel="nofollow noreferrer">icnfnt</a> or <a href="http://fontello.com" rel="nofollow noreferrer">fontello</a> to create specific icon sets rather than downloading the entire family of icons. It's also available as a hosted file on a content delivery network <a href="http://www.bootstrapcdn.com/#fontawesome_tab" rel="nofollow noreferrer">BootstrapCDN</a> (provided by <a href="http://www.maxcdn.com/" rel="nofollow noreferrer">MaxCDN</a> company).</p> <p>It is free for commercial use and licensed under the <a href="http://scripts.sil.org/OFL" rel="nofollow noreferrer">SIL Open Font License 1.1</a>.</p> <h2>Syntax, ver 3.x (<a href="//fortawesome.github.io/Font-Awesome/3.2.1/examples/" rel="nofollow noreferrer">documentation</a>):</h2> <pre class="lang-none prettyprint-override"><code>icon-[name] </code></pre> <p>with some examples: </p> <pre class="lang-html prettyprint-override"><code>&lt;i class="icon-cogs"&gt;&lt;/i&gt; &lt;i class="bookmark-empty"&gt;&lt;/i&gt; &lt;i class="icon-facebook-sign"&gt;&lt;/i&gt; &lt;i class="icon-arrow-left"&gt;&lt;/i&gt; </code></pre> <p><img src="https://i.stack.imgur.com/vssi7.png" alt="Basic example"></p> <p>Where <code>[name]</code> can be found in <a href="//fortawesome.github.io/Font-Awesome/3.2.1/icons/" rel="nofollow noreferrer">icon list</a>, and different extensions and modifications are found in the <a href="//fortawesome.github.io/Font-Awesome/3.2.1/examples/" rel="nofollow noreferrer">old documentation</a>. See also <a href="//github.com/FortAwesome/Font-Awesome/wiki/Upgrading-from-3.2.1-to-4" rel="nofollow noreferrer">issues when upgrading</a>.</p> <h2>Syntax, ver 4.x (<a href="http://fortawesome.github.io/Font-Awesome/whats-new" rel="nofollow noreferrer">documentation</a>):</h2> <pre class="lang-none prettyprint-override"><code>fa fa-[name]-[shape]-[o]-[direction] </code></pre> <p>Where:</p> <ul> <li><code>[name]</code> is the name of the icon (<a href="http://fortawesome.github.io/Font-Awesome/icons/" rel="nofollow noreferrer">icon list</a>).</li> <li><code>[shape]</code> is the optional shape of the icon's background: either <code>circle</code> or <code>square</code>. </li> <li><code>[o]</code> is the optional outlined version of the icon.</li> <li><code>[direction]</code> is the direction in which certain icons point (arrows, etc.).</li> </ul> <p>For example:</p> <pre class="lang-html prettyprint-override"><code>&lt;i class="fa fa-cogs"&gt;&lt;/i&gt; &lt;i class="fa fa-bookmark-o"&gt;&lt;/i&gt; &lt;i class="fa fa-facebook-square"&gt;&lt;/i&gt; &lt;i class="fa fa-arrow-left"&gt;&lt;/i&gt; </code></pre> <p><img src="https://i.stack.imgur.com/vssi7.png" alt="Basic Example"></p> <p>As Font Awesome icons are font-based we can then apply our own <a href="/questions/tagged/css" class="post-tag" title="show questions tagged &#39;css&#39;" rel="tag">css</a> styling on top:</p> <pre class="lang-css prettyprint-override"><code>i.fa { color: purple; font-size: 64px; padding: 5px 10px; } </code></pre> <p><img src="https://i.stack.imgur.com/8rSPY.png" alt="CSS-applied Example"></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload