Font Awesome icon usage statistics

  • 4 types of Font Awesome iconic font are used and found 11 times in total.
  • ASTRAL-DIRECT.CO.UK used 2.8 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of ASTRAL-DIRECT.CO.UK are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • ASTRAL-DIRECT.CO.UK includes "http://www.astral-direct.co.uk/wp-content/themes/unite/style.css?ver=4.2.2" to use Font Awesome and information from CSS is like below.
  • @font-face {
    	font-family: 'Conv_Exo2-Regular';
    	src: url('http://www.astral-direct.co.uk/wp-content/themes/unite/fonts/Exo2-Regular.eot');
    	src: local('☺'), url('http://www.astral-direct.co.uk/wp-content/themes/unite/fonts/Exo2-Regular.woff') format('woff'), url('http://www.astral-direct.co.uk/wp-content/themes/unite/fonts/Exo2-Regular.ttf') format('truetype'), url('http://www.astral-direct.co.uk/wp-content/themes/unite/fonts/Exo2-Regular.svg') format('svg');
    	font-weight: normal;
    	font-style: normal;
    }
    @font-face {
    	font-family: 'Conv_Exo2-SemiBold';
    	src: url('http://www.astral-direct.co.uk/wp-content/themes/unite/fonts/Exo2-SemiBold.eot');
    	src: local('☺'), url('http://www.astral-direct.co.uk/wp-content/themes/unite/fonts/Exo2-SemiBold.woff') format('woff'), url('http://www.astral-direct.co.uk/wp-content/themes/unite/fonts/Exo2-SemiBold.ttf') format('truetype'), url('http://www.astral-direct.co.uk/wp-content/themes/unite/fonts/Exo2-SemiBold.svg') format('svg');
    	font-weight: normal;
    	font-style: normal;
    }
    html {
        font-family: sans-serif;
    }
    body {
        margin: 0;
    }
    article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
        display: block;
    }
    audio, canvas, progress, video {
        display: inline-block;
        vertical-align: baseline;
    }
    audio:not([controls]) {
        display: none;
        height: 0;
    }
    [hidden], template {
        display: none;
    }
    a {
        background-color: transparent;
    }
    a:active, a:hover {
        outline: 0 none;
    }
    abbr[title] {
        border-bottom: 1px dotted;
    }
    b, strong {
        font-weight: 700;
    }
    dfn {
        font-style: italic;
    }
    h1 {
        font-size: 2em;
        margin: 0.67em 0;
    }
    mark {
        background: none repeat scroll 0 0 #ff0;
        color: #000;
    }
    small {
        font-size: 80%;
    }
    sub, sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }
    sup {
        top: -0.5em;
    }
    sub {
        bottom: -0.25em;
    }
    img {
        border: 0 none;
    }
    svg:not(:root) {
        overflow: hidden;
    }
    figure {
        margin: 1em 40px;
    }
    hr {
        box-sizing: content-box;
        height: 0;
    }
    pre {
        overflow: auto;
    }
    code, kbd, pre, samp {
        font-family: monospace,monospace;
        font-size: 1em;
    }
    button, input, optgroup, select, textarea {
        color: inherit;
        font: inherit;
        margin: 0;
    }
    button {
        overflow: visible;
    }
    button, select {
        text-transform: none;
    }
    button, html input[type="button"], input[type="reset"], input[type="submit"] {
        cursor: pointer;
    }
    button[disabled], html input[disabled] {
        cursor: default;
    }
    button::-moz-focus-inner, input::-moz-focus-inner {
        border: 0 none;
        padding: 0;
    }
    input {
        line-height: normal;
    }
    input[type="checkbox"], input[type="radio"] {
        box-sizing: border-box;
        padding: 0;
    }
    input[type="search"] {
        box-sizing: content-box;
    }
    fieldset {
        border: 1px solid silver;
        margin: 0 2px;
        padding: 0.35em 0.625em 0.75em;
    }
    legend {
        border: 0 none;
        padding: 0;
    }
    textarea {
        overflow: auto;
    }
    optgroup {
        font-weight: 700;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    td, th {
        padding: 0;
    }
    @media print {
    *, *::after, *::before {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
        box-shadow: none !important;
        color: #000 !important;
        text-shadow: none !important;
    }
    a, a:visited {
        text-decoration: underline;
    }
    a[href]::after {
        content: " (" attr(href) ")";
    }
    abbr[title]::after {
        content: " (" attr(title) ")";
    }
    a[href^="javascript:"]::after, a[href^="#"]::after {
        content: "";
    }
    blockquote, pre {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    thead {
        display: table-header-group;
    }
    img, tr {
        page-break-inside: avoid;
    }
    img {
        max-width: 100% !important;
    }
    h2, h3, p {
        orphans: 3;
        widows: 3;
    }
    h2, h3 {
        page-break-after: avoid;
    }
    select {
        background: none repeat scroll 0 0 #fff !important;
    }
    .navbar {
        display: none;
    }
    .btn > .caret, .dropup > .btn > .caret {
        border-top-color: #000 !important;
    }
    .label {
        border: 1px solid #000;
    }
    .table {
        border-collapse: collapse !important;
    }
    .table td, .table th {
        background-color: #fff !important;
    }
    .table-bordered td, .table-bordered th {
        border: 1px solid #ddd !important;
    }
    }
    @font-face{font-family:'FontAwesome';src:url('../font/fontawesome-webfont.eot?v=3.2.1');src:url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'),url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');font-weight:normal;font-style:normal;}

Examples and source code

fa-times

Place Font Awesome icons just about anywhere with the <i> tag.

<i class="fa fa-times"></i> fa-times
Icon classes are echoed via CSS :before.

fa-times

fa-times

fa-times

fa-times

fa-times

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.

<p><i class="fa fa-times fa-lg"></i> fa-times</p>
<p><i class="fa fa-times fa-2x"></i> fa-times</p>
<p><i class="fa fa-times fa-3x"></i> fa-times</p>
<p><i class="fa fa-times fa-4x"></i> fa-times</p>
<p><i class="fa fa-times fa-5x"></i> fa-times</p>
If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Use fa-fw to set icons at a fixed width. Great to use when variable icon widths throw off alignment. Especially useful in things like nav lists.

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#"><i class="fa fa-times fa-fw"></i> Home</a></li>
  <li><a href="#"><i class="fa fa-times fa-fw"></i> Library</a></li>
</ul>
  • Font Awesome icon can be used
  • to easily replace lists

Use fa-ul and fa-li to easily replace default bullets in unordered lists.

<ul class="fa-ul">
  <li><i class="fa-li fa fa-times"></i>Font Awesome icon can be used</li>
  <li><i class="fa-li fa fa-times fa-spin"></i>to easily replace lists</li>
</ul>

Use a few styles together and you'll have easy pull quotes or a great introductory article icon.

Use fa-border and pull-right or pull-left for easy pull quotes or article graphics.

<i class="fa fa-times fa-2x pull-left fa-border"></i>
Use a few styles together and you'll have easy pull quotes or a great introductory article icon.

  normal
  fa-rotate-90
  fa-rotate-180
  fa-rotate-270
  fa-flip-horizontal
  fa-flip-vertical

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.

<i class="fa fa-times"></i>  normal<br>
<i class="fa fa-times fa-rotate-90"></i>  fa-rotate-90<br>
<i class="fa fa-times fa-rotate-180"></i>  fa-rotate-180<br>
<i class="fa fa-times fa-rotate-270"></i>  fa-rotate-270<br>
<i class="fa fa-times fa-flip-horizontal"></i>  fa-flip-horizontal<br>
<i class="fa fa-times fa-flip-vertical"></i>  fa-flip-vertical

Use the fa-spin class to get any icon to rotate. Works well with fa-spinner, fa-refresh, and fa-cog.

<i class="fa fa-times fa-2x fa-spin"></i>
<i class="fa fa-times fa-3x fa-spin"></i>
<i class="fa fa-times fa-4x fa-spin"></i>

CSS3 animations aren't supported in IE8 - IE9.

fa-times on fa-square-o
fa-times on fa-circle
fa-timesl on fa-square
fa-ban on fa-times

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-times fa-stack-1x"></i>
</span>
fa-times on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-times fa-stack-1x fa-inverse"></i>
</span>
fa-times on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-times fa-stack-1x fa-inverse"></i>
</span>
fa-times on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-times fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-times

Font Awesome works great with the full range of Bootstrap components.

<a class="btn btn-danger" href="#">
  <i class="fa fa-times fa-lg"></i> fa-times</a>
<a class="btn btn-default btn-sm" href="#">
  <i class="fa fa-times"></i> fa-times</a>

<a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-times fa-2x pull-left"></i> Font Awesome<br>fa-times



<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-times fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="fa-times">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-times fa-fw"></i></span>
  <input class="form-control" type="password" placeholder="fa-times">
</div>