Font Awesome icon usage statistics

  • 13 types of Font Awesome iconic font are used and found 29 times in total.
  • CLICKDO.CO.UK used 2.2 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of CLICKDO.CO.UK are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • CLICKDO.CO.UK includes "https://www.clickdo.co.uk/wp-content/cache/minify/000000/XY5JDsIwDEUvRDBdcZwqpL_FkEmx26i3JxQJRV1Zev7TQDvU2Jj0iWIKvFVMJidRMdmvC0cS3T2o8rRALzcS6xlRqeaHfaPs9JLRpdAsKGRFoEJOpMfjXFLUy0CuHevUzKkEcyeOzq8TfvqjRpqo5rZjY9Q-7Q-7BV9eFjmRuXUYWyEp4Bo4du-j4hwAySkKb_gA.css?ab8d65" to use Font Awesome and information from CSS is like below.
  • @font-face{font-family:'font-icons';src:url('/wp-content/plugins/wp-review/assets/fonts/font-icons.eot?ab8d65');src:url('/wp-content/plugins/wp-review/assets/fonts/font-icons.eot?ab8d65') format('embedded-opentype'),
    url('/wp-content/plugins/wp-review/assets/fonts/font-icons.woff?ab8d65') format('woff'),
    url('/wp-content/plugins/wp-review/assets/fonts/font-icons.ttf?ab8d65') format('truetype'),
    url('/wp-content/plugins/wp-review/assets/fonts/font-icons.svg?ab8d65') format('svg');font-weight:normal;font-style:normal}[class^="mts-icon-"]:before,[class*=" mts-icon-"]:before{font-family:"font-icons";font-style:normal;font-weight:normal;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:0;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:2px}[class*="mts-icon-loader"]:before{font-family:"font-icons";font-style:normal;font-weight:normal;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right: .2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left: .2em}.mts-icon-star:before{content:'\e800'}.mts-icon-loader:before{content:'\e801'}.animate-spin{-moz-animation:spin 1s infinite linear;-o-animation:spin 1s infinite linear;-webkit-animation:spin 1s infinite linear;animation:spin 1s infinite linear;display:inline-block}@-moz-keyframes
    spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes
    spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-o-keyframes
    spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-ms-keyframes
    spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes
    spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@media screen and (max-width:1040px){.review-desc{width:71%}}@media screen and (max-width:860px){.review-desc{width:66%}}@media screen and (max-width:470px){.review-desc{padding:4%;width:100%}.review-total-wrapper{width:100%;margin-right:0}.review-total-wrapper span.review-total-box{padding:10px
    0 20px;text-align:left;padding-left:10px}.user-total-wrapper{width:96%}.review-total-star.allowed-to-rate{position:relative;right:auto;left:0;float:left}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.container{margin:0
    auto;position:relative}.container{max-width:880px}.row{position:relative}.row:after,.col:after,.clr:after,.group:after{content:"";display:block;height:0;clear:both;visibility:hidden}.row,div.clear{padding-bottom:24px}.col{position:relative;display:block;float:left;width:100%}@media (min-width: 690px){.col{margin-right:2%}.wpb_column{margin-right:0px}}.col.col_last{margin-right:0}.col:last-child{margin-right:0}@media (min-width: 690px){.span_1{width:6.5%}.span_2{width:15.0%}.span_3{width:23.5%}.span_4{width:32.0%}.span_5{width:40.5%}.span_6{width:49.0%}.span_7{width:57.5%}.span_8{width:66.0%}.span_9{width:74.5%}.span_10{width:83.0%}.span_11{width:91.5%}.span_12{width:100%}.full-width-content.vc_row-fluid
    .vc_span1{width:8.33%}.full-width-content.vc_row-fluid
    .vc_span2{width:16.66%}.full-width-content.vc_row-fluid
    .vc_span3{width:25%}.full-width-content.vc_row-fluid
    .vc_span4{width:33.33%}.full-width-content.vc_row-fluid
    .vc_span5{width:40.5%}.full-width-content.vc_row-fluid
    .vc_span6{width:50%}.full-width-content.vc_row-fluid
    .vc_span7{width:57.5%}.full-width-content.vc_row-fluid
    .vc_span8{width:66.66%}.full-width-content.vc_row-fluid
    .vc_span9{width:75%}.full-width-content.vc_row-fluid
    .vc_span10{width:83.0%}.full-width-content.vc_row-fluid
    .vc_span11{width:91.5%}.full-width-content.vc_row-fluid
    .vc_span12{width:100%}.full-width-content.vc_row-fluid
    .wpb_column{margin-left:0!important}.full-width-content.vc_row-fluid .wpb_column .wpb_row, .full-width-content.vc_row-fluid .wpb_column
    .wpb_wrapper{margin:0}}@font-face{font-family:'FontAwesome';src:url('/wp-content/themes/salient/css/fonts/fontawesome-webfont.eot?v=3.2.1&ab8d65');src:url('/wp-content/themes/salient/css/fonts/fontawesome-webfont.eot?#iefix&v=3.2.1&ab8d65') format('embedded-opentype'),
    url('/wp-content/themes/salient/css/fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg'),
    url('/wp-content/themes/salient/css/fonts/fontawesome-webfont.woff?v=3.2.1&ab8d65') format('woff'),
    url('/wp-content/themes/salient/css/fonts/fontawesome-webfont.ttf?v=3.2.1&ab8d65') format('truetype');font-weight:normal;font-style:normal}

Examples and source code

icon-plus-sign

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

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

icon-plus-sign

icon-plus-sign

icon-plus-sign

icon-plus-sign

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

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

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

CSS3 animations aren't supported in IE8 - IE9.

icon-plus-sign on icon-check-empty
icon-plus-sign on icon-circle
icon-plus-signl on icon-sign-blank
icon-ban-circle on icon-plus-sign

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