Font Awesome icon usage statistics

  • 8 types of Font Awesome iconic font are used and found 13 times in total.
  • 1RE.FR used 1.6 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of 1RE.FR are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • 1RE.FR includes "http://1re.fr/wp-content/cache/minify/000000/VY1RDoMwDEMvRJZxpK41rFpoqias4vbrED_8WX5P9swHnEJRf6NRgwRHoqrmRlX2NRc2PwTcc1rh08y9kit5z-5oHM34yrQAaQgeXoLaMMifJixhF39suUxPjqLxc_aLlnHcYbrhBs-_mzq2qhbLX_wA.css" to use Font Awesome and information from CSS is like below.
  • @font-face{font-family:TablePress;src:url(/wp-content/plugins/tablepress/css/tablepress.eot);src:url(/wp-content/plugins/tablepress/css/tablepress.eot?#ie) format('embedded-opentype'),url(data:application/x-font-woff;base64,d09GRgABAAAAAAXYAAwAAAAACXwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABHAAAABwAAAAcZInHOk9TLzIAAAE4AAAAPgAAAGB7NXPDY21hcAAAAXgAAABMAAABUvD45QVnYXNwAAABxAAAAAgAAAAIAAAAEGdseWYAAAHMAAABKQAAAgjYVHFyaGVhZAAAAvgAAAAvAAAANv2jaBNoaGVhAAADKAAAAB0AAAAkCk0F6GhtdHgAAANIAAAAIAAAACgoAADqbG9jYQAAA2gAAAAWAAAAFgJWAbxtYXhwAAADgAAAAB0AAAAgAE4AH25hbWUAAAOgAAAB3AAAA43ZugaUcG9zdAAABXwAAABZAAAAgeNVfAkAAAABAAAAAMwXcmMAAAAAy1XFoAAAAADNHI82eJxjYGbexjiBgZWBhaWHxZiBgaENQjMVM0SB+ThBQWVRMYPDh+APd9gY/gP5bAyMykCKEUmJAgMjAC56Ct8AAHicY2BgYGaAYBkGRgYQ8AHyGMF8FgYDIM0BhEwMDB9CPtz6cOf/fyAr+MN1EIt/A78evy5UFxgwsjHAuYxAPSB9KICRYdgDAL67D8kAAQAB//8AD3icXU/NTsJAEJ5ZFggxxmCbkiwHAzLTowlu4ejeyxPwCOBR7r3rE/geeubuG3i3TyGts12MtT18ndnd7w8QsvpdX/Q/IAboI9s1rpY3mMTDkcAVDuaqPD0RqRfaU05UGSxJhj2p5wDNUplqyjsZQT6EQ/2mc9GcyBIPReQOObPrkccHMZhgonMS3R1tiLCsDNFm8bgQF3W06ekgqqnN5Aa//D9nlrOgDeg09Aq4lK3RTiX16n621BBVLrIe2PQK09s2c4THyPIvF4TrAndwO5uHvhPUwOa7MNw8FsCtZfZDJBKB66BQhW58cRwHW09OVMEtI+3aOhEHX+E63crM2dh6X+WazMFLvf6F57OvAqiPGvo+87Tb+LrT4X9/7lT6bKXs9vsByDlkyAAAAHicY2BkYGAA4mO9Sxji+W2+MnCzM4DAWZl+bwT9fyuLN+tpIJeDgQkkCgAbqgoOAHicY2BkYGBj+HeXgYGdAQRYvBkYGVABFwA+hgJEAAAAeJxjZ4AAdiBmaWAwBeJSFhAbiJkaGByAGMwGADa+AxEAAAAAAAAAAAAqAFgAdgCUALIA0AEEAAB4nGNgZGBg4GKQYWBiAAEQycgAEnMA8xkABjEAbgAAAHicjZJBaxNBFMf/u0mbJoig5KC3QcRblt2tFCm9lEp701iKIHiZJLPJ0mSnzE5S8h38BB79Nn4ab94E/zN9JVB7MCEzv/3Pm/f+720ADPEbCe4/qXCCAV4Kp+jhrXAHGb4Ld/Ecv4T38Cx5I7yPQfJBuIdPyR/hAzxJa+E+Buk3Zku6fal8xwn9dIRTPMVr4Q6+4kS4S/Wn8B5eJanwPobJO+EefiRfhA/wIv0o3Mcw3YRyV9CYYAmDMRzXll9c6cnSjJ1pyZcU51gzRDMAl2a+XmrCOSwa+Lg7RhgolJxKzv2Yv8cSqwfZ7iILHGHEdcT7OfdDJreNP7dublSZ5epY7QwpMUCxOBoVozIvDh/v4mEx/JsE+MwQx+A6dhO8hA7y2EvwUjLEuLa2jSqyPFcsV/7H0MbxUFMOYwkhVSykODAb10U8OePTDbY8qel0QV3FO1PSvaUqDnh3p5LBB8WxxozqKnZ4TU1T9THfhJ3vsjTcw9M02s1ocWl0a5QzlXHKW+UXRp3Zm62r5wuvWjP1oenKunhS8YUo7/TMrLS7Vtp7V0/WMaSxvp6aNoP8FYKzU9zGOpbOTHidzqvTW9PaFZ/e0+QmtnJBatjAlqLeGHWhm9kWfwGPR6C4eJxjYGIAg/9VDFEM2AAXEDMyMDEyMTIzsjCyMrIxsjNy8CRnpJYV5efF56SmlfDCOEWZ6RklXMmJRakl8Sn55XkcEGZpAVQMpJgbwgQrZSnOLyoBACnGHqgAAAA=) format('woff'),url(/wp-content/plugins/tablepress/css/tablepress.ttf) format('truetype'),url(/wp-content/plugins/tablepress/css/tablepress.svg#TablePress) format('svg');font-weight:400;font-style:normal}.tablepress-table-description{clear:both;display:block}.tablepress{border-collapse:collapse;border-spacing:0;width:100%;margin-bottom:1em;border:none}.tablepress td,.tablepress th{padding:8px;border:none;background:0 0;text-align:left;float:none!important}.tablepress tbody td{vertical-align:top}.tablepress tbody td,.tablepress tfoot th{border-top:1px solid #ddd}.tablepress tbody tr:first-child td{border-top:0}.tablepress thead th{border-bottom:1px solid #ddd}.tablepress tfoot th,.tablepress thead th{background-color:#d9edf7;font-weight:700;vertical-align:middle}.tablepress .odd td{background-color:#f9f9f9}.tablepress .even td{background-color:#fff}.tablepress .row-hover tr:hover td{background-color:#f3f3f3}.tablepress img{margin:0;padding:0;border:none;max-width:none}.dataTables_wrapper{clear:both;margin-bottom:1em}.dataTables_wrapper .tablepress{clear:both;margin:0!important}.dataTables_length{float:left;white-space:nowrap}.dataTables_filter{float:right;white-space:nowrap}.dataTables_info{clear:both;float:left;margin:4px 0 0}.dataTables_paginate{float:right;margin:4px 0 0}.dataTables_paginate a{color:#111!important;display:inline-block;outline:0;position:relative;text-decoration:underline;text-decoration:none\0/IE;margin:0 5px}.dataTables_paginate a:first-child{margin-left:0}.dataTables_paginate a:last-child{margin-right:0}.paginate_button:hover{cursor:pointer;text-decoration:none}.paginate_button.disabled{color:#999!important;text-decoration:none;cursor:default}.paginate_button.current{font-weight:700;text-decoration:none;cursor:default}.dataTables_paginate.paging_simple{padding:0 15px}.paging_simple .paginate_button.next:after,.paging_simple .paginate_button.previous:before{text-align:left;font-family:TablePress;font-size:14px;font-weight:700;-webkit-font-smoothing:antialiased;content:"\f053";text-shadow:.1em .1em #666;position:absolute;top:0;right:auto;bottom:0;left:-14px;margin:auto;height:14px;width:14px;line-height:1}.paging_simple .paginate_button.next:after{text-align:right;content:"\f054";left:auto}.paginate_button:after,.paginate_button:before{color:#d9edf7}.paginate_button:hover:after,.paginate_button:hover:before{color:#049cdb}.paginate_button.disabled:after,.paginate_button.disabled:before{color:#f9f9f9}.dataTables_processing{display:none}.dataTables_scroll{clear:both}.dataTables_scrollBody{-webkit-overflow-scrolling:touch}.tablepress .sorting,.tablepress .sorting_asc,.tablepress .sorting_desc{position:relative;padding-right:20px;cursor:pointer;outline:0}.tablepress .sorting:after,.tablepress .sorting_asc:after,.tablepress .sorting_desc:after{font-family:TablePress;font-weight:400;font-size:14px;-webkit-font-smoothing:antialiased;position:absolute;top:0;bottom:0;left:auto;right:6px;margin:auto;height:14px;line-height:1}.tablepress .sorting:after{content:"\f0dc"}.tablepress .sorting_asc:after{content:"\f0d8";padding:0 0 2px}.tablepress .sorting_desc:after{content:"\f0d7"}.tablepress .sorting:hover,.tablepress .sorting_asc,.tablepress .sorting_desc{background-color:#049cdb}.dataTables_scrollBody .tablepress thead th:after{content:""}.dataTables_wrapper:after{content:"";display:block;clear:both;visibility:hidden;line-height:0;height:0}.dataTables_wrapper label input,.dataTables_wrapper label select{display:inline;margin:2px;width:auto}@font-face{font-family:'FontAwesome';src:url('/wp-content/themes/clock/font/fontawesome-webfont.eot?v=3.2.1');src:url('/wp-content/themes/clock/font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),url('/wp-content/themes/clock/font/fontawesome-webfont.woff?v=3.2.1') format('woff'),url('/wp-content/themes/clock/font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),url('/wp-content/themes/clock/font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');font-weight:normal;font-style:normal}

Examples and source code

icon-time

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

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

icon-time

icon-time

icon-time

icon-time

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

<p><i class=" icon-time icon-large"></i> icon-time</p>
<p><i class=" icon-time icon-2x"></i> icon-time</p>
<p><i class=" icon-time icon-3x"></i> icon-time</p>
<p><i class=" icon-time icon-4x"></i> icon-time</p>
If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.
  • Font Awesome icon can be used
  • to easily replace lists

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

<ul class="icon-ul">
  <li><i class="icon-li  icon-time"></i>Font Awesome icon can be used</li>
  <li><i class="icon-li  icon-time icon-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 icon-border and pull-right or pull-left for easy pull quotes or article graphics.

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

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

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

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

Use the icon-spin class to get any icon to rotate.

<i class=" icon-time icon-2x icon-spin"></i>
<i class=" icon-time icon-3x icon-spin"></i>
<i class=" icon-time icon-4x icon-spin"></i>

CSS3 animations aren't supported in IE8 - IE9.

icon-time on icon-check-empty
icon-time on icon-circle
icon-timel on icon-sign-blank
icon-ban-circle on icon-time

To stack multiple icons, use the icon-stack class on the parent, the icon-light for the regularly sized icon, and icon-stack-base for the larger icon. icon-light 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="icon-stack">
  <i class=" icon-check-empty icon-stack-base"></i>
  <i class=" icon-time "></i>
</span>
icon-time on icon-check-empty<br>
<span class="icon-stack">
  <i class=" icon-circle icon-stack-base"></i>
  <i class=" icon-time icon-light"></i>
</span>
icon-time on icon-circle<br>
<span class="icon-stack">
  <i class=" icon-sign-blank icon-stack-base"></i>
  <i class=" icon-time icon-light "></i>
</span>
icon-time on icon-sign-blank<br>
<span class="icon-stack">
  <i class=" icon-time icon-light"></i>
  <i class=" icon-ban-circle icon-stack-base text-error"></i>
</span>
icon-ban-circle on icon-time