Font Awesome icon usage statistics

  • 8 types of Font Awesome iconic font are used and found 12 times in total.
  • COLDAVENGER.COM used 1.5 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of COLDAVENGER.COM are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • COLDAVENGER.COM includes "http://cdn.shopify.com/s/files/1/0783/1901/t/4/assets/style.css?14793808366770715328" to use Font Awesome and information from CSS is like below.
  • @font-face {font-family: 'flexslider-icon';src:url(//cdn.shopify.com/s/files/1/0783/1901/t/4/assets/flexslider-icon.eot?11208136544849516229);src:url(//cdn.shopify.com/s/files/1/0783/1901/t/4/assets/flexslider-icon.eot?%23iefix&11208136544849516229) format('embedded-opentype'),url(//cdn.shopify.com/s/files/1/0783/1901/t/4/assets/flexslider-icon.woff?11208136544849516229) format('woff'),url(//cdn.shopify.com/s/files/1/0783/1901/t/4/assets/flexslider-icon.ttf?11208136544849516229) format('truetype'),url(//cdn.shopify.com/s/files/1/0783/1901/t/4/assets/flexslider-icon.svg%23flexslider-icon?11208136544849516229) format('svg');font-weight: normal;font-style: normal;}
    .flexslider{margin:0;padding:0;}
    .flexslider .slides > li{display:none;-webkit-backface-visibility:hidden;}
    .flexslider .slides img{width:100%;display:block;}
    .flex-pauseplay span{text-transform:capitalize;}
    .slides:after{content:"\0020";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
    html[xmlns] .slides{display:block;}
    * html .slides{height:1%;}
    .no-js .slides > li:first-child {display:block;}
    .flexslider{position:relative;zoom:1;}
    .flex-viewport{max-height:2000px;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}
    .loading .flex-viewport{max-height:300px;}
    .flexslider .slides{zoom:1;}
    .carousel li{margin-right:5px;}
    .flex-direction-nav{*height:0;}
    .flex-direction-nav a{text-decoration:none;display:block;width:30px;height:32px;margin:-10px 0 0;position:absolute;top:50%;z-index:10;overflow:hidden;opacity:0;cursor:pointer;color:rgba(0,0,0,0.8);text-shadow:1px 1px 0 rgba(255,255,255,0.3);-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;}
    .flex-direction-nav .flex-prev{left:0px;}
    .flex-direction-nav .flex-next{right:0px;text-align:right;}
    .flexslider:hover .flex-prev{opacity:0.7;left:10px;}
    .flexslider:hover .flex-next{opacity:0.7;right:10px;}
    .flexslider:hover .flex-next:hover,.flexslider:hover .flex-prev:hover{opacity:1;}
    .flex-direction-nav .flex-disabled{opacity:0!important;filter:alpha(opacity=0);cursor:default;}
    .flex-direction-nav a:before{font-family:"flexslider-icon";font-size:30px;display:inline-block;content:'\f001';}
    .flex-direction-nav a.flex-next:before{content:'\f002';}
    .flex-pauseplay a{display:block;width:20px;height:20px;position:absolute;bottom:5px;left:10px;opacity:0.8;z-index:10;overflow:hidden;cursor:pointer;color:#000;}
    .flex-pauseplay a:before{font-family:"flexslider-icon";font-size:30px;display:inline-block;content:'\f004';}
    .flex-pauseplay a:hover{opacity:1;}
    .flex-pauseplay a.flex-play:before{content:'\f003';}
    .flex-control-nav{width:100%;position:absolute;bottom:-40px;text-align:center;}
    .flex-control-nav li{margin:0 6px;display:inline-block;zoom:1;*display:inline;}
    .flex-control-paging li a{width:11px;height:11px;display:block;background:#666;background:rgba(0,0,0,0.5);cursor:pointer;text-indent:-9999px;-webkit-border-radius:20px;-moz-border-radius:20px;-o-border-radius:20px;border-radius:20px;-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);-o-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);box-shadow:inset 0 0 3px rgba(0,0,0,0.3);}
    .flex-control-paging li a:hover{background:#333;background:rgba(0,0,0,0.7);}
    .flex-control-paging li a.flex-active{background:#000;background:rgba(0,0,0,0.9);cursor:default;}
    .flex-control-thumbs{margin:5px 0 0;position:static;overflow:hidden;}
    .flex-control-thumbs li{width:25%;float:left;margin:0;}
    .flex-control-thumbs img{width:100%;display:block;opacity:.7;cursor:pointer;}
    .flex-control-thumbs img:hover{opacity:1;}
    .flex-control-thumbs .flex-active{opacity:1;cursor:default;}
    .alertify,
    .alertify-log{}
    .alertify{background:#FFF;border:10px solid #333;/* browsers that don't support rgba */border:10px solid rgba(0,0,0,.7);border-radius:8px;box-shadow:0 3px 3px rgba(0,0,0,.3);-webkit-background-clip:padding;/* Safari 4? Chrome 6? */-moz-background-clip:padding;/* Firefox 3.6 */background-clip:padding-box;/* Firefox 4,Safari 5,Opera 10,IE 9 */}
    .alertify-text{border:1px solid #CCC;padding:10px;border-radius:4px;}
    .alertify-button{border-radius:4px;color:#FFF;font-weight:bold;padding:6px 15px;text-decoration:none;box-shadow:inset 0 1px 0 0 rgba(255,255,255,.5);background-image:-webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));background-image:-moz-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));background-image:-ms-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));background-image:-o-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));background-image:linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));}
    .alertify-button:hover,
    .alertify-button:focus{outline:none;box-shadow:0 0 15px #2B72D5;background-image:-webkit-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));background-image:-moz-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));background-image:-ms-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));background-image:linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));}
    .alertify-button:active{position:relative;top:1px;}
    .alertify-button-cancel{background-color:#FE1A00;border:1px solid #D83526;}
    .alertify-button-ok{background-color:#5CB811;border:1px solid #3B7808;}
    .alertify-log{background:#bad80a;color:Added to Cart;padding:15px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;color:#fff;}
    .alertify-log-error{background:#FE1A00;background:rgba(254,26,0,.9);}
    .alertify-log-success{background:#bad80a;color:Added to Cart;}
    .alertify-show,
    .alertify-log{-webkit-transition:all 500ms cubic-bezier(0.175,0.885,0.320,1);/* older webkit */-webkit-transition:all 500ms cubic-bezier(0.175,0.885,0.320,1.275);-moz-transition:all 500ms cubic-bezier(0.175,0.885,0.320,1.275);-ms-transition:all 500ms cubic-bezier(0.175,0.885,0.320,1.275);-o-transition:all 500ms cubic-bezier(0.175,0.885,0.320,1.275);transition:all 500ms cubic-bezier(0.175,0.885,0.320,1.275);/* easeOutBack */}
    .alertify-hide{-webkit-transition:all 250ms cubic-bezier(0.600,0,0.735,0.045);/* older webkit */-webkit-transition:all 250ms cubic-bezier(0.600,-0.280,0.735,0.045);-moz-transition:all 250ms cubic-bezier(0.600,-0.280,0.735,0.045);-ms-transition:all 250ms cubic-bezier(0.600,-0.280,0.735,0.045);-o-transition:all 250ms cubic-bezier(0.600,-0.280,0.735,0.045);transition:all 250ms cubic-bezier(0.600,-0.280,0.735,0.045);/* easeInBack */}
    .alertify-cover{position:fixed;z-index:99999;top:0;right:0;bottom:0;left:0;}
    .alertify{position:fixed;z-index:99999;top:50px;left:50%;width:550px;margin-left:-275px;}
    .alertify-hidden{top:-50px;visibility:hidden;}
    .alertify-logs{position:fixed;z-index:5000;top:10px;right:10px;width:300px;}
    .alertify-log{display:block;margin-top:10px;position:relative;right:-300px;}
    .alertify-log-show{right:0;}
    .alertify-dialog{padding:25px;}
    .alertify-resetFocus{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}
    .alertify-inner{text-align:center;}
    .alertify-text{margin-bottom:15px;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-size:100%;}
    .alertify-buttons{}
    .alertify-button{line-height:1.5;font-size:100%;display:inline-block;cursor:pointer;margin-left:5px;}
    #customerLeft {width:45%;float:left;}
    #customerRight {width:45%;float:right;}
    .action_top{padding-top:10px;text-align:center;}
    .action_return a{display:inline-block;}
    .note p {margin:0;padding:0;font-size: 12px;line-height: 15px;font-style: italic;}
    .address_table{width: 48%;float: left;margin: 10px 4% 60px 0;}
    .oddAddress {margin-right:0;}
    .address_title{float:left;margin-bottom:0;}
    .cancelled_order,
    .cancelled_order a {color:;}
    .customer_address {padding:20px;background:#eeeeee;}
    .customer_address form {}
    .customer_address_table {margin:0;border:0 !important;}
    .customer_address .view_address{display:none;}
    .customer_address .view_address p {padding-bottom:0;margin:0;}
    .address_actions {margin-bottom:0 !important;font-size:12px;float:right;}
    .address_actions a {margin-left:10px;display:inline-block;}
    .default_address{font-style:italic;margin-left:10px;}
    .note{color:;font-size:12px;font-weight:normal;}
    .note_first{font-weight:bold;}
    .order_date{padding:12px 15px;text-align:left;background:#f4f8e4;margin-bottom:20px;}
    .order_number{width:100px;}
    .order_section_title{padding-bottom:15px;}
    .order_summary .label{padding:10px 35px 10px 6px;}
    .order_summary td{border:none;text-align:center !important;}
    .order_total td{border-bottom:1px solid ;border-top:1px solid ;font-weight:bold;}
    .status_paid,.status_authorized,
    .status_filed,.status_pending,
    .status_abandoned,
    .status_fulfilled,
    .status_partial,
    .status_unfulfilled,
    .status_restocked,
    .status_voided,
    .status_refunded {font-size:12px;padding:1px 4px;margin:0;}
    .status_paid,.status_authorized,
    .status_fulfilled {background-color:#80BD4E;color:#FFFFFF;}
    .status_filed,.status_pending,
    .status_unfulfilled {background-color:#EEEEEE;color:#000000;}
    .status_abandoned,.status_voided,
    .status_refunded,
    .status_restocked {background-color:#AF9C7E;color:#FFFFFF;}
    .value{text-align:left;}
    .textile #customer_orders table td {text-align:center !important;}
    #address_tables .label {color:;font-size:12px;padding-right:35px;width:100px;}
    .edit_address p,
    #add_address p {margin-bottom:15px !important;}
    #add_address {margin:0 0 40px;}
    #address_pagination{padding-top:20px;}
    #view_address {display:block;margin-top:15px;}
    #customer_sidebar {padding:12px;background: #eeeeee;}
    #view_address {text-align:center;height:34px;line-height:34px;padding:0 15px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;background: #333333;color:#ffffff !important;outline: 0;border: 0;text-transform: uppercase;font-weight: 700;-webkit-appearance:none;-webkit-transition: background-color 0.2s linear;-moz-transition: background-color 0.2s linear;-ms-transition: background-color 0.2s linear;-o-transition: background-color 0.2s linear;transition: background-color 0.2s linear;}
    #addAddressLink {margin-bottom:40px;display:inline-block;height:34px;line-height:34px;padding:0 15px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;background: #333333;color:#ffffff !important;outline: 0;border: 0;text-transform: uppercase;font-weight: 700;-webkit-appearance:none;-webkit-transition: background-color 0.2s linear;-moz-transition: background-color 0.2s linear;-ms-transition: background-color 0.2s linear;-o-transition: background-color 0.2s linear;transition: background-color 0.2s linear;}
    #badtoken{width:200px;}
    #customer,
    #recover-password{width:100%;}
    #guestForm {border-top: 1px solid #eeeeee;padding:30px 0;margin-top:40px;}
    #customer_detail .name{padding-bottom:5px;}
    #customer_sidebar {float:left;padding-right:30px;text-align:left;width:25%;}
    #forgot_password a{color:;display:block;height:34px;float:left;line-height:34px;text-align:center;width:203px;border:1px solid #E8E8E8;border-left:none;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;-webkit-border-top-left-radius:0px;-webkit-border-bottom-left-radius:0px;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-topleft:0px;-moz-border-radius-bottomleft:0px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-top-left-radius:0px;border-bottom-left-radius:0px;}
    #forgot_password a:hover{text-decoration:underline;#000000;}
    #logout{font-size:11px;position:absolute;right:0;top:0;}
    #customer_orders {width:70%;float:right;}
    #customer_orders table {margin-top:0 !important;text-align:center;}
    #customer_orders .date{width:125px;}
    #order_address {float:left;width:25%;padding:12px;background: #eeeeee;margin:20px 0;}
    #order_address p {line-height:1.2em;text-align:left;}
    #order_cancelled{margin-bottom:20px;}
    #order_cancelled_title{padding-bottom:0;}
    #order_details {width:70%;}
    #order_details,
    #order_notes{float:right;margin:20px 0 0;}
    #order_details .money{white-space:nowrap;}
    #order_details {text-align:center;}
    #order_payment{border-bottom:1px solid #eeeeee;padding:10px 0 15px;}
    #order_shipping{padding:25px 0 10px;}
    #order_notes{width:580px;}
    #forgotPasswordLink {margin-top:10px;display:inline-block;}
    td.alignTextLeft {text-align:left !important;padding-left:6px;}
    .fb_iframe_widget iframe {background: #ffffff !important;}
    .fb_iframe_widget iframe .fbFeedbackContent .fbFeedbackContentHeader {border-color:#eeeeee !important;}
    body.giftcard-template {background:#ffffff ;min-width:100%;width:100%;min-height:100%;height:100%;}
    .giftcard-template #content {background:0;}
    #gift-card-outer-container {background:0;-webkit-box-shadow:0 0 0 #fff;-moz-box-shadow:0 0 0 #fff;box-shadow:0 0 0 #fff;}
    #gift-card-main {width:90%;max-width:700px;margin:30px auto;}
    #gift-card-main .btn,
    #gift-card-main .btn:link,
    #gift-card-main .btn:visited {font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:400;text-transform:none;cursor: pointer;display:inline-block;width:auto;padding: 0 12px;font-size: 13px;height: 34px;line-height: 34px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;background: #333333;color:#ffffff !important;outline: 0;border: 0;-webkit-appearance:none;-webkit-transition: background-color 0.2s linear;-moz-transition: background-color 0.2s linear;-ms-transition: background-color 0.2s linear;-o-transition: background-color 0.2s linear;transition: background-color 0.2s linear;}
    #gift-card-main .btn:focus,
    #gift-card-main .btn:hover,
    #gift-card-main .btn:active {background-color:#444444;}
    @font-face{font-family:'FontAwesome';src:url(//cdn.shopify.com/s/files/1/0783/1901/t/4/assets/fontawesome-webfont.eot?v=3.2.1&11208136544849516229);src: url(//cdn.shopify.com/s/files/1/0783/1901/t/4/assets/fontawesome-webfont.eot?%23iefix&v=3.2.1&11208136544849516229) format('embedded-opentype'),url(//cdn.shopify.com/s/files/1/0783/1901/t/4/assets/fontawesome-webfont.woff?v=3.2.1&11208136544849516229) format('woff'),url(//cdn.shopify.com/s/files/1/0783/1901/t/4/assets/fontawesome-webfont.ttf?v=3.2.1&11208136544849516229) format('truetype'),url(//cdn.shopify.com/s/files/1/0783/1901/t/4/assets/fontawesome-webfont.svg%23fontawesomeregular?v=3.2.1&11208136544849516229) format('svg');font-weight:normal;font-style:normal;}

Examples and source code

icon-angle-right

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

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

icon-angle-right

icon-angle-right

icon-angle-right

icon-angle-right

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

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

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

CSS3 animations aren't supported in IE8 - IE9.

icon-angle-right on icon-check-empty
icon-angle-right on icon-circle
icon-angle-rightl on icon-sign-blank
icon-ban-circle on icon-angle-right

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