Font Awesome icon usage statistics

  • 11 types of Font Awesome iconic font are used and found 21 times in total.
  • OHIO.COM used 1.9 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of OHIO.COM are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • OHIO.COM includes "http://www.ohio.com/css/akron/ohio_responsive_2014.css" to use Font Awesome and information from CSS is like below.
  • @font-face {
        font-family: 'Florencesans';
        src:url('/img/akron/fonts/florencesans/Florencesans.ttf.woff') format('woff'),
            url('/img/akron/fonts/florencesans/Florencesans.ttf.svg#Florencesans') format('svg'),
            url('/img/akron/fonts/florencesans/Florencesans.ttf.eot'),
            url('/img/akron/fonts/florencesans/Florencesans.ttf.eot?#iefix') format('embedded-opentype'); 
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family:'robotoregular';
        src: url('/img/akron/fonts/roboto_fonts/roboto_regular_macroman/Roboto-Regular-webfont.eot');
        src: url('/img/akron/fonts/roboto_fonts/roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('/img/akron/fonts/roboto_fonts/roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
             url('/img/akron/fonts/roboto_fonts/roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
             url('/img/akron/fonts/roboto_fonts/roboto_regular_macroman/Roboto-Regular-webfont.svg#robotoregular') format('svg');
        font-weight:normal;
        font-style:normal;
    }
    #top-site-bar-wrapper {
        width:100%;
        background:none repeat scroll 0 0 #ededed;
        border-bottom:4px solid #9e0a0a;
        overflow:hidden;
        padding-left:0px;
        padding-right:0px;
    }
    #top-site-bar {
        width:100%;
        max-width:1010px;
        line-height:35px;
        margin:0 auto;
        padding:0;
    }
    #mobile-ad-wrapper {
        width:100%;
        margin:10px auto 0px;
        display:block;
        text-align:center;
    }
    #welcome-message-area {
        float:left;
        text-align:left;
        display:none;
    }
    #welcome-message-area span a {
        color:#a1a1a1;
        font-size:1.0em;
        float:left;
        text-decoration:none;
    }
    #header-left-wrapper {
        /* float:left; */
        float:none;
        text-align:center;
        overflow:hidden;
    }
    #date-insert-area {
        /* float:left; */
        float:none;
        overflow:hidden;
        clear:left;
        margin-left:5px;
        color:#999999;
        font-size:0.85em;
        text-decoration:none;
        font-weight:bold;
        text-align:center;
    }
    #date-insert-area span {
        display:none;
    }
    #date-insert-area span a {
        color:#999999;
        text-decoration:none;
        font-weight:bold;
    }
    #login-area-wrapper {
        float:left;
        padding-left:8px;
        color: #6b6b6b;
        /* color: #A1A1A1; */
        display: inline-block;
        text-decoration: none;
        text-shadow: -1px -1px 0 #FFFFFF;
    }
    #login-area-wrapper a {
    	color:#6b6b6b;
        /* color:#a1a1a1; */
        font-size:0.75em;
        display:inline-block;
        text-decoration:none;
        text-shadow:-1px -1px 0px #ffffff;
    }
    #login-area-wrapper a:hover {
        color:#e40c0c;
    }
    #login-area-wrapper a:active {
        color:#e40c0c;
    }
    /* START HEADER STYLES ON PAGE */
    #header-full-width-wrapper {
        background:none repeat scroll 0 0 #222222;
        padding-top:5px;
        padding-bottom:5px;
        padding-left:5px;
        padding-right:5px;
    }
    #header-center-content {
        width:100%;
        max-width:1020px;
        margin:0 auto;
        padding:0px;
        overflow:hidden;
        text-align:center;
    }
    #header-logo {
        /* float:left; */
        float:none;
        width:100%;
        max-width:280px;
        height:auto;
        /* margin:15px auto 0px; */
        margin:5px auto 0px;
    }
    #header-logo a {
        width:100%;
        height:100%;
        display:block;
        text-align:center;
    }
    #header-logo img {
        width:175px;
        height:40px;
    }
    #search-bar-content-wrapper {
        background:none repeat scroll 0 0 #222222;
        width:100%;
        overflow:hidden;
        padding-top:5px;
        padding-bottom:2px;
        display:none;
    }
    #search-insert-center {
    	margin:0 auto;
    }
    #search-insert-bar {
    	margin:0 auto;
    	width:280px;
    }
    #weather-search {
        float:none;
        /* float:right; */
        overflow:hidden;
    }
    #weather-insert {
        float:none;
        display:none;
    }
    #weather-sponsor-insert {
        float:none;
        display:none;
        width:220px;
    }
    #search-insert {
        float:none;
        display:none;
    }
    #mobile-weather-insert {
        color:#ffffff;
        font-size:0.8em;
        vertical-align:middle;
        line-height:18px;
    }
    #mobile-weather-insert img {
        vertical-align:middle;
    }
    /* END HEADER STYLES ON PAGE */
    /* BEGIN MENU STYLES FOR DROP MENU NEW */
    @font-face{
        font-family:'FontAwesome';
        src:url('/fonts/akron/fontawesome-webfont.eot?v=3.2.1');
        src: url('/fonts/akron/fontawesome-webfont-webfont.eot');
        src:url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAVsAA8AAAAACGAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAcZttVW0dERUYAAAF0AAAAHQAAACAARgAET1MvMgAAAZQAAABAAAAAYI4uqs5jbWFwAAAB1AAAAIIAAAGiZ+17r2N2dCAAAAJYAAAABAAAAAQARAURZ2FzcAAAAlwAAAAIAAAACAAAABBnbHlmAAACZAAAAGQAAABoJ54LrWhlYWQAAALIAAAALgAAADYAK6sIaGhlYQAAAvgAAAAdAAAAJAlBBs1obXR4AAADGAAAADYAAABkXR0ARGxvY2EAAANQAAAADwAAADQCEAJEbWF4cAAAA2AAAAAfAAAAIABdADluYW1lAAADgAAAAWcAAAK4PAplmHBvc3QAAAToAAAAewAAANve5M3pd2ViZgAABWQAAAAGAAAABn/cUyMAAAABAAAAAMw9os8AAAAAy1SCMAAAAADPSTBbeNpjYGRgYOADYgkGEGBiYARCCSBmAfMYAAVSAEsAAAB42mNgZp7EOIGBlYGF1YjlLAMDw0wIzXSWIR3MxwkKKouKGRwYeFX/sN3+d5uBge02oy9QmBFJiQIDIwCZlw0qeNpjYGBgZoBgGQZGBhCYA+QxgvksDA1gWgAowgNk8TIoMCxgWMmwjmELwzEFLgV9hXhFJdU///+D9UFkV0BlGZBkGf9//f/4f8r/2P+R/0P+Oz/guv/s/vZ7X2/BbMQJGNkY4EoYmYAEE7oCiNMHA2BnE+dgZeDEo4KFLHMB39cjZQAAAEQFEQABAAH//wAPeNpjYGJwYWBgSmENZWBmYGfQ28jIoG+ziZ2F4a3RRjbWOzabmJmATIaNzCBhVpDwJnY2xj82mxhB4saCioKqioKKLkwK/1QYZ/zLYA39tdqF5SwDAwMjAwwwMzBYMgMArjQWcHjaY2BkYGBgYWA4wv7LNJ7f5iuDPAcDCJz3NIhGpplSWEOBFAcDE4gHAPrJB9YAAHjaY2BkYGC7/W8zAwMHAwgwpTAwMqACSQBWJQMcAAAAeNpjesPgwsHAwMC0CogZIJgDCwbJs4YiaMbjQAykGR5DMVCcURBIe0NokBxYnzUDAwC45gi3AAB42mNgYNAhEZoAAGuoBFUAeNpjYGRgYJBk4GBgYgABEMnIABJzYNADCQAABrgAlwB42nWQzU7CQBSFzwj+EKMrQ1w2xrhwgRSrUXb4g5qgECTotiAVohTS1h98DB/AhQsfxJXuXPoEPoent1MEo5nMne/emTn3zACYwzMSUMkUgBxnxAppZhFPYB6HmhNYQl1zEiu41zyJZTxpnuLdV83TVP/UPINF9aA5hQX1qHkWq+pF8xvS6kPzO7LqC6c4QgkGyuijBZdURI9rQCqhg6ZUfUYDJjKc8X4Bd6z6zLpcq5yXuME1bHg8U8YJalQoYAd5ZjXW9nGOCrkq2V8qxi+dOjOPux05bcCigyxnjpwjmVj/R6lChRY1IuceoyNaBk/2JLZlZ5dZHwPudNi3Le8O7zRJcVeHqzdyxxn+UMC6jQtWu+L3ijWb1UD0GnzHj4rLNdA/6vMNRVENVcad71HhVvockFyqD8RXQJ95rHHE/e2xexnpdEZqjDg05ceK4sfAsbgMq5bELSqa2GTcwPbwT61vanRo3AB42m3ISQ6CQABE0SpQEEdk5y2a1nZYEg1HEUyIcePCK+AQb+zUtfRvXvIR4Nerwh7/mgEMGCJkBw9c0eKOJ7uMGLPHhH0OOOSIY06Ycoobs6hqLqc6j8/HgzFm5y3MV/sZMpdWzuVCOrmUK7mWG1l4bel1Xldu399pKl0AAAFTI3/bAAA=') format('woff'),
           url('/fonts/akron/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),
           url('/fonts/akron/fontawesome-webfont.woff?v=3.2.1') format('woff'),
           url('/fonts/akron/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),
           url('/fonts/akron/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
        src: url(/fonts/akron/data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAVsAA8AAAAACGAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAcZttVW0dERUYAAAF0AAAAHQAAACAARgAET1MvMgAAAZQAAABAAAAAYI4uqs5jbWFwAAAB1AAAAIIAAAGiZ+17r2N2dCAAAAJYAAAABAAAAAQARAURZ2FzcAAAAlwAAAAIAAAACAAAABBnbHlmAAACZAAAAGQAAABoJ54LrWhlYWQAAALIAAAALgAAADYAK6sIaGhlYQAAAvgAAAAdAAAAJAlBBs1obXR4AAADGAAAADYAAABkXR0ARGxvY2EAAANQAAAADwAAADQCEAJEbWF4cAAAA2AAAAAfAAAAIABdADluYW1lAAADgAAAAWcAAAK4PAplmHBvc3QAAAToAAAAewAAANve5M3pd2ViZgAABWQAAAAGAAAABn/cUyMAAAABAAAAAMw9os8AAAAAy1SCMAAAAADPSTBbeNpjYGRgYOADYgkGEGBiYARCCSBmAfMYAAVSAEsAAAB42mNgZp7EOIGBlYGF1YjlLAMDw0wIzXSWIR3MxwkKKouKGRwYeFX/sN3+d5uBge02oy9QmBFJiQIDIwCZlw0qeNpjYGBgZoBgGQZGBhCYA+QxgvksDA1gWgAowgNk8TIoMCxgWMmwjmELwzEFLgV9hXhFJdU///+D9UFkV0BlGZBkGf9//f/4f8r/2P+R/0P+Oz/guv/s/vZ7X2/BbMQJGNkY4EoYmYAEE7oCiNMHA2BnE+dgZeDEo4KFLHMB39cjZQAAAEQFEQABAAH//wAPeNpjYGJwYWBgSmENZWBmYGfQ28jIoG+ziZ2F4a3RRjbWOzabmJmATIaNzCBhVpDwJnY2xj82mxhB4saCioKqioKKLkwK/1QYZ/zLYA39tdqF5SwDAwMjAwwwMzBYMgMArjQWcHjaY2BkYGBgYWA4wv7LNJ7f5iuDPAcDCJz3NIhGpplSWEOBFAcDE4gHAPrJB9YAAHjaY2BkYGC7/W8zAwMHAwgwpTAwMqACSQBWJQMcAAAAeNpjesPgwsHAwMC0CogZIJgDCwbJs4YiaMbjQAykGR5DMVCcURBIe0NokBxYnzUDAwC45gi3AAB42mNgYNAhEZoAAGuoBFUAeNpjYGRgYJBk4GBgYgABEMnIABJzYNADCQAABrgAlwB42nWQzU7CQBSFzwj+EKMrQ1w2xrhwgRSrUXb4g5qgECTotiAVohTS1h98DB/AhQsfxJXuXPoEPoent1MEo5nMne/emTn3zACYwzMSUMkUgBxnxAppZhFPYB6HmhNYQl1zEiu41zyJZTxpnuLdV83TVP/UPINF9aA5hQX1qHkWq+pF8xvS6kPzO7LqC6c4QgkGyuijBZdURI9rQCqhg6ZUfUYDJjKc8X4Bd6z6zLpcq5yXuME1bHg8U8YJalQoYAd5ZjXW9nGOCrkq2V8qxi+dOjOPux05bcCigyxnjpwjmVj/R6lChRY1IuceoyNaBk/2JLZlZ5dZHwPudNi3Le8O7zRJcVeHqzdyxxn+UMC6jQtWu+L3ijWb1UD0GnzHj4rLNdA/6vMNRVENVcad71HhVvockFyqD8RXQJ95rHHE/e2xexnpdEZqjDg05ceK4sfAsbgMq5bELSqa2GTcwPbwT61vanRo3AB42m3ISQ6CQABE0SpQEEdk5y2a1nZYEg1HEUyIcePCK+AQb+zUtfRvXvIR4Nerwh7/mgEMGCJkBw9c0eKOJ7uMGLPHhH0OOOSIY06Ycoobs6hqLqc6j8/HgzFm5y3MV/sZMpdWzuVCOrmUK7mWG1l4bel1Xldu399pKl0AAAFTI3/bAAA=) format('woff'),
             url('/fonts/akron/fontawesome-webfont-webfont.ttf') format('truetype'),
             url('/fonts/akron/fontawesome-webfont-webfont.svg#fontawesomeregular') format('svg');
        font-weight:normal;
        font-style:normal;
    }

Examples and source code

fa-reply

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

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

fa-reply

fa-reply

fa-reply

fa-reply

fa-reply

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-reply fa-lg"></i> fa-reply</p>
<p><i class="fa fa-reply fa-2x"></i> fa-reply</p>
<p><i class="fa fa-reply fa-3x"></i> fa-reply</p>
<p><i class="fa fa-reply fa-4x"></i> fa-reply</p>
<p><i class="fa fa-reply fa-5x"></i> fa-reply</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-reply fa-fw"></i> Home</a></li>
  <li><a href="#"><i class="fa fa-reply 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-reply"></i>Font Awesome icon can be used</li>
  <li><i class="fa-li fa fa-reply 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-reply 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-reply"></i>  normal<br>
<i class="fa fa-reply fa-rotate-90"></i>  fa-rotate-90<br>
<i class="fa fa-reply fa-rotate-180"></i>  fa-rotate-180<br>
<i class="fa fa-reply fa-rotate-270"></i>  fa-rotate-270<br>
<i class="fa fa-reply fa-flip-horizontal"></i>  fa-flip-horizontal<br>
<i class="fa fa-reply 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-reply fa-2x fa-spin"></i>
<i class="fa fa-reply fa-3x fa-spin"></i>
<i class="fa fa-reply fa-4x fa-spin"></i>

CSS3 animations aren't supported in IE8 - IE9.

fa-reply on fa-square-o
fa-reply on fa-circle
fa-replyl on fa-square
fa-ban on fa-reply

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-reply fa-stack-1x"></i>
</span>
fa-reply on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-reply fa-stack-1x fa-inverse"></i>
</span>
fa-reply on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-reply fa-stack-1x fa-inverse"></i>
</span>
fa-reply on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-reply fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-reply

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

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

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



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