Font Awesome icon usage statistics

  • 2 types of Font Awesome iconic font are used and found 2 times in total.
  • RADIUSTWC.COM used 1.0 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of RADIUSTWC.COM are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • RADIUSTWC.COM includes "http://radiustwc.com/content/themes/radius/less/69814f1.css" to use Font Awesome and information from CSS is like below.
  • @font-face{font-family:'Museo 500';src:url('../font/Museo500-Regular.eot');src:url('../font/Museo500-Regular.eot?#iefix') format('embedded-opentype'),url('../font/Museo500-Regular.woff') format('woff'),url('../font/Museo500-Regular.ttf') format('truetype'),url('../font/Museo500-Regular.svg#e3e98f6b6cb95391f30e0ab01b7437d9') format('svg');font-style:normal;font-weight:400}@font-face{font-family:'Museo 300';src:url('../font/Museo300-Regular.eot');src:url('../font/Museo300-Regular.eot?#iefix') format('embedded-opentype'),url('../font/Museo300-Regular.woff') format('woff'),url('../font/Museo300-Regular.ttf') format('truetype'),url('../font/Museo300-Regular.svg#d8b40b84b4bd6e4b75ac0cfe1e5ed91f') format('svg');font-style:normal;font-weight:400}@font-face{font-family:'Trend Sans One';src:url('../font/TrendSans-One.eot');src:url('../font/TrendSans-One.eot?#iefix') format('embedded-opentype'),url('../font/TrendSans-One.woff') format('woff'),url('../font/TrendSans-One.ttf') format('truetype'),url('../font/TrendSans-One.svg#b4f5865431c5a7c6c225f0f4f0329a5e') format('svg');font-style:normal;font-weight:400}@font-face{font-family:'Museo 700';src:url('../font/Museo700-Regular.eot');src:url('../font/Museo700-Regular.eot?#iefix') format('embedded-opentype'),url('../font/Museo700-Regular.woff') format('woff'),url('../font/Museo700-Regular.ttf') format('truetype'),url('../font/Museo700-Regular.svg#87e82fa757b19ea2f170ec4b20873855') format('svg');font-style:normal;font-weight:400}.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}html{font-size:100%;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:#f11a22;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0;font-family:'Museo 300',serif;font-size:14px;line-height:20px;color:#111;background-color:#c9c1b7}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}.container{padding-left:10px;padding-right:10px;max-width:1080px;margin-left:auto;margin-right:auto;*zoom:1}.container:before,.container:after{display:table;content:"";line-height:0}.container:after{clear:both}.row{width:100%;margin-left:auto;margin-right:auto;*zoom:1}.row:before,.row:after{display:table;content:"";line-height:0}.row:after{clear:both}.row .col12,.count12>.cols{float:left;display:block}.row .col12,.count12>.cols,.row .center12{width:99.99999999999999%}.row>.addleft12{margin-left:99.99999999999999%}.row>.addright12{margin-right:99.99999999999999%}.row>.padleft12{padding-left:99.99999999999999%}.row>.padright12{padding-right:99.99999999999999%}.row .col12.add{width:97.22222222222221%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.row .col12.pad{width:97.22222222222221%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}.row .col12.center{margin-left:auto;margin-right:auto;float:none}.row input.col12{width:99.58333333333333%}.count12>.cols{width:8.333333333333332%}.count12>.cols.add{width:5.555555555555555%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.count12>.cols.pad{width:5.555555555555555%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}@media(max-width:767px){.row .col12,.row .col12.add,.row .col12.pad,.count12>.cols,.count12>.cols.add,.count12>.cols.pad{width:auto;float:none;display:block}body .row .mcol12,body .count12>.mcols{float:left;display:block}body .row .mcol12,body .count12>.mcols{width:99.99999999999999%}}.row .col11,.count11>.cols{float:left;display:block}.row .col11,.count11>.cols,.row .center11{width:91.66666666666666%}.row>.addleft11{margin-left:91.66666666666666%}.row>.addright11{margin-right:91.66666666666666%}.row>.padleft11{padding-left:91.66666666666666%}.row>.padright11{padding-right:91.66666666666666%}.row .col11.add{width:88.88888888888889%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.row .col11.pad{width:88.88888888888889%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}.row .col11.center{margin-left:auto;margin-right:auto;float:none}.row input.col11{width:91.25%}.count11>.cols{width:9.090909090909092%}.count11>.cols.add{width:6.313131313131313%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.count11>.cols.pad{width:6.313131313131313%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}@media(max-width:767px){.row .col11,.row .col11.add,.row .col11.pad,.count11>.cols,.count11>.cols.add,.count11>.cols.pad{width:auto;float:none;display:block}body .row .mcol11,body .count11>.mcols{float:left;display:block}body .row .mcol11,body .count11>.mcols{width:91.66666666666666%}}.row .col10,.count10>.cols{float:left;display:block}.row .col10,.count10>.cols,.row .center10{width:83.33333333333331%}.row>.addleft10{margin-left:83.33333333333331%}.row>.addright10{margin-right:83.33333333333331%}.row>.padleft10{padding-left:83.33333333333331%}.row>.padright10{padding-right:83.33333333333331%}.row .col10.add{width:80.55555555555556%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.row .col10.pad{width:80.55555555555556%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}.row .col10.center{margin-left:auto;margin-right:auto;float:none}.row input.col10{width:82.91666666666667%}.count10>.cols{width:10%}.count10>.cols.add{width:7.222222222222221%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.count10>.cols.pad{width:7.222222222222221%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}@media(max-width:767px){.row .col10,.row .col10.add,.row .col10.pad,.count10>.cols,.count10>.cols.add,.count10>.cols.pad{width:auto;float:none;display:block}body .row .mcol10,body .count10>.mcols{float:left;display:block}body .row .mcol10,body .count10>.mcols{width:83.33333333333331%}}.row .col9,.count9>.cols{float:left;display:block}.row .col9,.count9>.cols,.row .center9{width:74.99999999999999%}.row>.addleft9{margin-left:74.99999999999999%}.row>.addright9{margin-right:74.99999999999999%}.row>.padleft9{padding-left:74.99999999999999%}.row>.padright9{padding-right:74.99999999999999%}.row .col9.add{width:72.22222222222221%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.row .col9.pad{width:72.22222222222221%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}.row .col9.center{margin-left:auto;margin-right:auto;float:none}.row input.col9{width:74.58333333333333%}.count9>.cols{width:11.11111111111111%}.count9>.cols.add{width:8.333333333333332%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.count9>.cols.pad{width:8.333333333333332%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}@media(max-width:767px){.row .col9,.row .col9.add,.row .col9.pad,.count9>.cols,.count9>.cols.add,.count9>.cols.pad{width:auto;float:none;display:block}body .row .mcol9,body .count9>.mcols{float:left;display:block}body .row .mcol9,body .count9>.mcols{width:74.99999999999999%}}.row .col8,.count8>.cols{float:left;display:block}.row .col8,.count8>.cols,.row .center8{width:66.66666666666666%}.row>.addleft8{margin-left:66.66666666666666%}.row>.addright8{margin-right:66.66666666666666%}.row>.padleft8{padding-left:66.66666666666666%}.row>.padright8{padding-right:66.66666666666666%}.row .col8.add{width:63.888888888888886%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.row .col8.pad{width:63.888888888888886%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}.row .col8.center{margin-left:auto;margin-right:auto;float:none}.row input.col8{width:66.25%}.count8>.cols{width:12.5%}.count8>.cols.add{width:9.722222222222223%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.count8>.cols.pad{width:9.722222222222223%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}@media(max-width:767px){.row .col8,.row .col8.add,.row .col8.pad,.count8>.cols,.count8>.cols.add,.count8>.cols.pad{width:auto;float:none;display:block}body .row .mcol8,body .count8>.mcols{float:left;display:block}body .row .mcol8,body .count8>.mcols{width:66.66666666666666%}}.row .col7,.count7>.cols{float:left;display:block}.row .col7,.count7>.cols,.row .center7{width:58.33333333333333%}.row>.addleft7{margin-left:58.33333333333333%}.row>.addright7{margin-right:58.33333333333333%}.row>.padleft7{padding-left:58.33333333333333%}.row>.padright7{padding-right:58.33333333333333%}.row .col7.add{width:55.55555555555556%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.row .col7.pad{width:55.55555555555556%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}.row .col7.center{margin-left:auto;margin-right:auto;float:none}.row input.col7{width:57.91666666666667%}.count7>.cols{width:14.285714285714285%}.count7>.cols.add{width:11.507936507936508%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.count7>.cols.pad{width:11.507936507936508%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}@media(max-width:767px){.row .col7,.row .col7.add,.row .col7.pad,.count7>.cols,.count7>.cols.add,.count7>.cols.pad{width:auto;float:none;display:block}body .row .mcol7,body .count7>.mcols{float:left;display:block}body .row .mcol7,body .count7>.mcols{width:58.33333333333333%}}.row .col6,.count6>.cols{float:left;display:block}.row .col6,.count6>.cols,.row .center6{width:49.99999999999999%}.row>.addleft6{margin-left:49.99999999999999%}.row>.addright6{margin-right:49.99999999999999%}.row>.padleft6{padding-left:49.99999999999999%}.row>.padright6{padding-right:49.99999999999999%}.row .col6.add{width:47.22222222222222%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.row .col6.pad{width:47.22222222222222%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}.row .col6.center{margin-left:auto;margin-right:auto;float:none}.row input.col6{width:49.583333333333336%}.count6>.cols{width:16.666666666666664%}.count6>.cols.add{width:13.88888888888889%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.count6>.cols.pad{width:13.88888888888889%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}@media(max-width:767px){.row .col6,.row .col6.add,.row .col6.pad,.count6>.cols,.count6>.cols.add,.count6>.cols.pad{width:auto;float:none;display:block}body .row .mcol6,body .count6>.mcols{float:left;display:block}body .row .mcol6,body .count6>.mcols{width:49.99999999999999%}}.row .col5,.count5>.cols{float:left;display:block}.row .col5,.count5>.cols,.row .center5{width:41.66666666666666%}.row>.addleft5{margin-left:41.66666666666666%}.row>.addright5{margin-right:41.66666666666666%}.row>.padleft5{padding-left:41.66666666666666%}.row>.padright5{padding-right:41.66666666666666%}.row .col5.add{width:38.88888888888889%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.row .col5.pad{width:38.88888888888889%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}.row .col5.center{margin-left:auto;margin-right:auto;float:none}.row input.col5{width:41.25%}.count5>.cols{width:20%}.count5>.cols.add{width:17.22222222222222%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.count5>.cols.pad{width:17.22222222222222%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}@media(max-width:767px){.row .col5,.row .col5.add,.row .col5.pad,.count5>.cols,.count5>.cols.add,.count5>.cols.pad{width:auto;float:none;display:block}body .row .mcol5,body .count5>.mcols{float:left;display:block}body .row .mcol5,body .count5>.mcols{width:41.66666666666666%}}.row .col4,.count4>.cols{float:left;display:block}.row .col4,.count4>.cols,.row .center4{width:33.33333333333333%}.row>.addleft4{margin-left:33.33333333333333%}.row>.addright4{margin-right:33.33333333333333%}.row>.padleft4{padding-left:33.33333333333333%}.row>.padright4{padding-right:33.33333333333333%}.row .col4.add{width:30.555555555555557%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.row .col4.pad{width:30.555555555555557%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}.row .col4.center{margin-left:auto;margin-right:auto;float:none}.row input.col4{width:32.916666666666664%}.count4>.cols{width:25%}.count4>.cols.add{width:22.22222222222222%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.count4>.cols.pad{width:22.22222222222222%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}@media(max-width:767px){.row .col4,.row .col4.add,.row .col4.pad,.count4>.cols,.count4>.cols.add,.count4>.cols.pad{width:auto;float:none;display:block}body .row .mcol4,body .count4>.mcols{float:left;display:block}body .row .mcol4,body .count4>.mcols{width:33.33333333333333%}}.row .col3,.count3>.cols{float:left;display:block}.row .col3,.count3>.cols,.row .center3{width:24.999999999999996%}.row>.addleft3{margin-left:24.999999999999996%}.row>.addright3{margin-right:24.999999999999996%}.row>.padleft3{padding-left:24.999999999999996%}.row>.padright3{padding-right:24.999999999999996%}.row .col3.add{width:22.22222222222222%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.row .col3.pad{width:22.22222222222222%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}.row .col3.center{margin-left:auto;margin-right:auto;float:none}.row input.col3{width:24.583333333333332%}.count3>.cols{width:33.33333333333333%}.count3>.cols.add{width:30.555555555555557%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.count3>.cols.pad{width:30.555555555555557%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}@media(max-width:767px){.row .col3,.row .col3.add,.row .col3.pad,.count3>.cols,.count3>.cols.add,.count3>.cols.pad{width:auto;float:none;display:block}body .row .mcol3,body .count3>.mcols{float:left;display:block}body .row .mcol3,body .count3>.mcols{width:24.999999999999996%}}.row .col2,.count2>.cols{float:left;display:block}.row .col2,.count2>.cols,.row .center2{width:16.666666666666664%}.row>.addleft2{margin-left:16.666666666666664%}.row>.addright2{margin-right:16.666666666666664%}.row>.padleft2{padding-left:16.666666666666664%}.row>.padright2{padding-right:16.666666666666664%}.row .col2.add{width:13.88888888888889%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.row .col2.pad{width:13.88888888888889%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}.row .col2.center{margin-left:auto;margin-right:auto;float:none}.row input.col2{width:16.25%}.count2>.cols{width:50%}.count2>.cols.add{width:47.22222222222222%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.count2>.cols.pad{width:47.22222222222222%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}@media(max-width:767px){.row .col2,.row .col2.add,.row .col2.pad,.count2>.cols,.count2>.cols.add,.count2>.cols.pad{width:auto;float:none;display:block}body .row .mcol2,body .count2>.mcols{float:left;display:block}body .row .mcol2,body .count2>.mcols{width:16.666666666666664%}}.row .col1,.count1>.cols{float:left;display:block}.row .col1,.count1>.cols,.row .center1{width:8.333333333333332%}.row>.addleft1{margin-left:8.333333333333332%}.row>.addright1{margin-right:8.333333333333332%}.row>.padleft1{padding-left:8.333333333333332%}.row>.padright1{padding-right:8.333333333333332%}.row .col1.add{width:5.555555555555555%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.row .col1.pad{width:5.555555555555555%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}.row .col1.center{margin-left:auto;margin-right:auto;float:none}.row input.col1{width:7.916666666666666%}.count1>.cols{width:100%}.count1>.cols.add{width:97.22222222222221%;margin-left:1.3888888888888888%;margin-right:1.3888888888888888%}.count1>.cols.pad{width:97.22222222222221%;padding-left:1.3888888888888888%;padding-right:1.3888888888888888%}@media(max-width:767px){.row .col1,.row .col1.add,.row .col1.pad,.count1>.cols,.count1>.cols.add,.count1>.cols.pad{width:auto;float:none;display:block}body .row .mcol1,body .count1>.mcols{float:left;display:block}body .row .mcol1,body .count1>.mcols{width:8.333333333333332%}}.borderleft{border-left:1px Solid #ddd;margin-right:-1px}.borderright{border-right:1px Solid #ddd;margin-left:-1px}.bordertop{border-top:1px Solid #ddd;padding-top:9px}.borderbottom{border-bottom:1px Solid #ddd;padding-bottom:9px}.borderleft{border-left:1px Solid #ddd;margin-right:-1px}.borderright{border-right:1px Solid #ddd;margin-left:-1px}.bordertop{border-top:1px Solid #ddd;padding-top:9px}.borderbottom{border-bottom:1px Solid #ddd;padding-bottom:9px}.centered{width:auto;margin-left:auto;margin-right:auto;display:block;position:relative}.boxed{display:block;width:auto;float:none;*zoom:1}.boxed:before,.boxed:after{display:table;content:"";line-height:0}.boxed:after{clear:both}.boxed.pad{padding:20px}.boxed.add{margin:20px}.pad{padding:20px}.add{margin:20px}.boxed>p,.boxed>h1,.boxed>h2,.boxed>h3{margin-bottom:0;margin-top:0}@font-face{font-family:'FontAwesome';src:url('../font/fontawesome-webfont.eot?v=3.1.0');src:url('../font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=3.1.0') format('woff'),url('../font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'),url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');font-weight:normal;font-style:normal}

Examples and source code

icon-remove

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

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

icon-remove

icon-remove

icon-remove

icon-remove

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-remove icon-large"></i> icon-remove</p>
<p><i class=" icon-remove icon-2x"></i> icon-remove</p>
<p><i class=" icon-remove icon-3x"></i> icon-remove</p>
<p><i class=" icon-remove icon-4x"></i> icon-remove</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-remove"></i>Font Awesome icon can be used</li>
  <li><i class="icon-li  icon-remove 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-remove 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-remove"></i>  normal<br>
<i class=" icon-remove icon-rotate-90"></i>  icon-rotate-90<br>
<i class=" icon-remove icon-rotate-180"></i>  icon-rotate-180<br>
<i class=" icon-remove icon-rotate-270"></i>  icon-rotate-270<br>
<i class=" icon-remove icon-flip-horizontal"></i>  icon-flip-horizontal<br>
<i class=" icon-remove icon-flip-vertical"></i>  icon-flip-vertical

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

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

CSS3 animations aren't supported in IE8 - IE9.

icon-remove on icon-check-empty
icon-remove on icon-circle
icon-removel on icon-sign-blank
icon-ban-circle on icon-remove

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-remove "></i>
</span>
icon-remove on icon-check-empty<br>
<span class="icon-stack">
  <i class=" icon-circle icon-stack-base"></i>
  <i class=" icon-remove icon-light"></i>
</span>
icon-remove on icon-circle<br>
<span class="icon-stack">
  <i class=" icon-sign-blank icon-stack-base"></i>
  <i class=" icon-remove icon-light "></i>
</span>
icon-remove on icon-sign-blank<br>
<span class="icon-stack">
  <i class=" icon-remove icon-light"></i>
  <i class=" icon-ban-circle icon-stack-base text-error"></i>
</span>
icon-ban-circle on icon-remove