Font Awesome icon usage statistics

  • 1 types of Font Awesome iconic font are used and found 9 times in total.
  • MARKETINGENREDES.COM used 9.0 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of MARKETINGENREDES.COM are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • MARKETINGENREDES.COM includes "http://www.marketingenredes.com/wp-content/plugins/bwp-minify/min/?f=wp-content/plugins/wysija-newsletters/css/validationEngine.jquery.css,wp-content/plugins/add-to-feedly/style.css,wp-content/plugins/click-to-tweet-by-todaymade/assets/css/styles.css,wp-content/plugins/cookie-warning/cookiewarning.css,wp-content/plugins/mailchimp-for-wp/assets/css/checkbox.min.css,wp-content/plugins/mailchimp-for-wp/assets/css/form-theme-dark.min.css,wp-content/plugins/all-in-one-schemaorg-rich-snippets/css/jquery.rating.css,wp-content/themes/canvas/style.css,wp-content/themes/canvas/css/layout.css" to use Font Awesome and information from CSS is like below.
  • @font-face{font-family:'journalregular';src:url('/wp-content/plugins/add-to-feedly/fonts/journal-webfont.eot');src:url('/wp-content/plugins/add-to-feedly/fonts/journal-webfont.eot?#iefix') format('embedded-opentype'),
    url('/wp-content/plugins/add-to-feedly/fonts/journal-webfont.woff') format('woff'),
    url('/wp-content/plugins/add-to-feedly/fonts/journal-webfont.ttf') format('truetype'),
    url('/wp-content/plugins/add-to-feedly/fonts/journal-webfont.svg#journalregular') format('svg');font-weight:normal;font-style:normal}#addtofeedly{width:100%;text-align:center;clear:both;height:auto;max-width:320px}#addtofeedly
    img{width:100%;border-radius:5px;max-width:320px;postion:relative;z-index:1}#addtofeedly
    .customtext{position:relative;max-width:190px;width:58%;float:right;margin-top:-110px;margin-right:15px;text-align:left;z-index:2;font-family:'journalregular';color:#5b8620;text-decoration:none;font-size:42px;font-weight:bold}#float_feed_box{position:fixed;bottom:10px;right:10px;z-index:20;opacity:0.6;filter:alpha(opacity=60)}#float_feed_box:hover{opacity:1;filter:alpha(opacity=100)}#float_feed_box.left{left:10px!important}#float_feed_box
    img{width:100%}#float_feed_box.floatfeed_big{width:140px}#float_feed_box.floatfeed_medium{width:100px}#float_feed_box.floatfeed_small{width:40px}.tm-tweet-clear{zoom:1}.tm-tweet-clear:after{display:block;visibility:hidden;height:0;clear:both;content:"."}.tm-click-to-tweet{display:block;background-color:#fff;margin:0;padding:0;position:relative;border:1px
    solid #ddd;-moz-border-radius:4px;border-radius:4px;padding:15px
    30px;margin:15px
    0px;zoom:1}.tm-click-to-tweet
    .clearfix{zoom:1}.tm-click-to-tweet .clearfix:after{display:block;visibility:hidden;height:0;clear:both;content:"."}.tm-click-to-tweet
    .clear{clear:both}.tm-click-to-tweet .f-left{float:left;display:inline-block;position:relative}.tm-click-to-tweet .f-right{float:right;display:inline-block;position:relative}.tm-click-to-tweet .list-reset{list-style:none;margin:0;padding:0}.tm-click-to-tweet .list-reset
    li{list-style:none;margin:0;padding:0}.tm-click-to-tweet .list-float{zoom:1}.tm-click-to-tweet .list-float:after{display:block;visibility:hidden;height:0;clear:both;content:"."}.tm-click-to-tweet .list-float
    li{float:left;display:inline-block}.tm-click-to-tweet .kill-box-shadow{box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}.tm-click-to-tweet
    .alignright{float:right;margin-bottom:10px;margin-left:10px;text-align:right}.tm-click-to-tweet
    .alignleft{float:left;margin-bottom:10px;margin-right:10px;text-align:right}.tm-click-to-tweet:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.tm-click-to-tweet .tm-ctt-reset{margin:0;padding:0;position:relative}.tm-click-to-tweet:after{display:block;visibility:hidden;height:0;clear:both;content:"."}.tm-click-to-tweet
    a{text-decoration:none;text-transform:none}.tm-click-to-tweet a:hover{text-decoration:none}.tm-click-to-tweet .tm-ctt-text{margin:0;padding:0;position:relative;margin-bottom:10px;word-wrap:break-word}.tm-click-to-tweet .tm-ctt-text
    a{margin:0;padding:0;position:relative;color:#999;font-size:24px;line-height:140%;text-transform:none;letter-spacing:0.05em;font-weight:100;text-decoration:none;text-transform:none}.tm-click-to-tweet .tm-ctt-text a:hover{text-decoration:none;color:#666}.tm-click-to-tweet a.tm-ctt-btn{margin:0;padding:0;position:relative;display:block;text-transform:uppercase;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;font-weight:bold;line-height:100%;color:#999;float:right;padding-right:24px;text-decoration:none;background:transparent url(/wp-content/plugins/click-to-tweet-by-todaymade/assets/img/twitter-little-bird.png) no-repeat right top}.tm-click-to-tweet a.tm-ctt-btn:hover{text-decoration:none;color:#666;text-transform:uppercase}.tm-click-to-tweet .tm-powered-by{font-size:10px;color:#999}.tm-click-to-tweet .tm-powered-by
    a{font-size:10px;color:#999 !important}.tm-click-to-tweet .tm-powered-by a:hover{color:#999 !important;text-decoration:underline !important}div#cookiewarning
    div#back{z-index:999999999999999999;position:absolute;top:0;left:0;width:100%;min-height:100%;background:rgb(0, 0, 0) transparent;background:rgba(0, 0, 0, 0.6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";text-align:center}div#cookiewarning
    p#buttons{text-align:right;overflow:hidden}div#cookiewarning div#back
    div{background-color:#FFF;width:50%;margin:5em
    auto;height:auto;padding:1.5em;text-align:justify}a#cookiewarningOK{display:block;min-width:1px;min-height:1px;float:right;background-color:#4CBB17;border:2px
    solid #93DB70;font-size:100%;padding:0.3em;color:#FFF;font-weight:bold}a#cookienotOK{float:right;font-size:80%;margin-right:1em;padding-top:1em}#mc4wp-checkbox{clear:both;display:block;position:static;width:auto}#mc4wp-checkbox input{float:none;width:auto;position:static;margin:0 6px 0 0;padding:0;vertical-align:middle;display:inline-block!important;max-width:21px;-webkit-appearance:checkbox}#mc4wp-checkbox label{float:none;display:block;cursor:pointer;width:auto;position:static}#_mc4wp_subscribe_woocommerce_checkout_field input,#_mc4wp_subscribe_woocommerce_checkout_field label{float:none!important;width:auto!important;display:inline-block!important}#registerform #mc4wp-checkbox{margin-bottom:10px}.mc4wp-form{margin:1em 0}.mc4wp-form label{display:block;font-weight:700}.mc4wp-form input{vertical-align:baseline}.mc4wp-form input.placeholdersjs{color:#aaa!important}.mc4wp-form input[type=date],.mc4wp-form input[type=email],.mc4wp-form input[type=tel],.mc4wp-form input[type=text],.mc4wp-form input[type=url],.mc4wp-form select,.mc4wp-form textarea{cursor:auto;display:block;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.mc4wp-form input[type=checkbox],.mc4wp-form input[type=radio]{position:relative;margin:0 6px 0 0;padding:0;height:13px;width:13px;display:inline-block;border:0}.mc4wp-form input[type=checkbox]{-webkit-appearance:checkbox}.mc4wp-form input[type=radio]{-webkit-appearance:radio}.mc4wp-form input[name="_mc4wp_required_but_not_really"]{display:none!important}.mc4wp-form li,.mc4wp-form ul{list-style:none;margin:0;padding:0}.mc4wp-form label>span,.mc4wp-form li>label{font-weight:400}.mc4wp-alert{margin:1em 0;padding:10px 15px;color:#c09853;background-color:#fcf8e3;border:1px solid #fbeed5;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;display:block;position:relative}.mc4wp-success{color:#468847;background-color:#dff0d8;border-color:#d6e9c6}.mc4wp-notice{color:#3a87ad;background-color:#d9edf7;border-color:#bce8f1}.mc4wp-error{color:#b94a48;background-color:#f2dede;border-color:#eed3d7}.mc4wp-form form,form.mc4wp-form{box-shadow:none!important;-webkit-box-shadow:none;-moz-box-shadow:none;width:auto}.mc4wp-form p{margin:0 0 15px!important;padding:0}.mc4wp-form label{font-size:1em;margin:6px 0}.mc4wp-form input[type=date],.mc4wp-form input[type=email],.mc4wp-form input[type=tel],.mc4wp-form input[type=text],.mc4wp-form input[type=url],.mc4wp-form select,.mc4wp-form textarea{width:100%;height:34px;margin:0;padding:6px 12px;font-size:14px;line-height:1.428571429;color:#555;vertical-align:middle;background-color:#fff;border:1px solid #ccc;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-moz-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;background-image:none;text-shadow:none}.mc4wp-form input[type=email]:focus,.mc4wp-form input[type=tel]:focus,.mc4wp-form input[type=text]:focus,.mc4wp-form input[type=url]:focus,.mc4wp-form select:focus,.mc4wp-form textarea:focus{outline:0;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.mc4wp-form textarea{height:auto}.mc4wp-form input[disabled],.mc4wp-form input[readonly]{background-color:#eee}.mc4wp-form button,.mc4wp-form input[type=button],.mc4wp-form input[type=submit]{display:inline-block;padding:6px 12px;margin:0;font-size:14px;font-weight:400;line-height:1.428571429;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;border:1px solid transparent;border-radius:2px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;box-shadow:none;background:0 0;text-shadow:none;filter:none;height:auto;width:auto}.mc4wp-form button:focus,.mc4wp-form input[type=button]:focus,.mc4wp-form input[type=submit]:focus{outline:#333 dotted thin;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}.mc4wp-form button:focus,.mc4wp-form button:hover,.mc4wp-form input[type=button]:focus,.mc4wp-form input[type=button]:hover,.mc4wp-form input[type=submit]:focus,.mc4wp-form input[type=submit]:hover{color:#333;text-decoration:none;background:0 0}.mc4wp-form button:active,.mc4wp-form input[type=button]:active,.mc4wp-form input[type=submit]:active{background-image:none;outline:0;-moz-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.mc4wp-form button,.mc4wp-form input[type=submit]{color:#fff!important;background-color:#444!important;border-color:#282828}.mc4wp-form button:active,.mc4wp-form button:focus,.mc4wp-form button:hover,.mc4wp-form input[type=submit]:active,.mc4wp-form input[type=submit]:focus,.mc4wp-form input[type=submit]:hover{color:#fff!important;background-color:#282828!important;border-color:#111}.mc4wp-form input[type=date]:focus,.mc4wp-form input[type=email]:focus,.mc4wp-form input[type=tel]:focus,.mc4wp-form input[type=text]:focus,.mc4wp-form input[type=url]:focus,.mc4wp-form select:focus,.mc4wp-form textarea:focus{border-color:#444}div.rating-cancel,div.star-rating{float:left;width:17px;height:17px;text-indent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidden}div.rating-cancel,div.rating-cancel
    a{background:url(/wp-content/plugins/all-in-one-schemaorg-rich-snippets/css/delete.gif) no-repeat 0 -16px}div.star-rating,div.star-rating
    a{background:url(/wp-content/plugins/all-in-one-schemaorg-rich-snippets/css/star.png) no-repeat 0 0px}div.rating-cancel a,div.star-rating
    a{display:block;width:16px;height:100%;background-position:0 -38px;border:0}div.star-rating-on
    a{background-position:0 0px!important}div.star-rating-hover
    a{background-position:0 -18px}div.rating-cancel a:hover{background-position:0 -16px}div.star-rating-readonly
    a{cursor:default !important}div.star-rating{background:transparent!important;overflow:hidden!important}#tabs{width:60%;float:left;margin-right:10px}@font-face{font-family:'FontAwesome';src:url('/wp-content/themes/canvas/includes/fonts/fontawesome-webfont.eot?v=3.1.0');src:url('/wp-content/themes/canvas/includes/fonts/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'), url('/wp-content/themes/canvas/includes/fonts/fontawesome-webfont.woff?v=3.1.0') format('woff'), url('/wp-content/themes/canvas/includes/fonts/fontawesome-webfont.ttf?v=3.1.0') format('truetype'), url('/wp-content/themes/canvas/includes/fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');font-weight:normal;font-style:normal}

Examples and source code

icon-comment

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

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

icon-comment

icon-comment

icon-comment

icon-comment

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

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

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

CSS3 animations aren't supported in IE8 - IE9.

icon-comment on icon-check-empty
icon-comment on icon-circle
icon-commentl on icon-sign-blank
icon-ban-circle on icon-comment

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