Font Awesome icon usage statistics

  • 5 types of Font Awesome iconic font are used and found 192 times in total.
  • BAKINGMAD.COM used 38.4 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of BAKINGMAD.COM are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • BAKINGMAD.COM includes "http://www.bakingmad.com/wp-content/themes/bakingmad/dist/styles/css/global.css?ver=3.0.1" to use Font Awesome and information from CSS is like below.
  • @font-face{font-family:'TradeGothicLT-Bold';src:url("../../../fonts/29BC90_0_0.eot");src:url("../../../fonts/29BC90_0_0.eot?#iefix") format("embedded-opentype"),url("../../../fonts/29BC90_0_0.woff") format("woff"),url("../../../fonts/29BC90_0_0.ttf") format("truetype"),url("../../../fonts/29BC90_0_0.svg#wf") format("svg")}@font-face{font-family:'ThirstyRoughRegTwo';src:url("../../../fonts/29BC90_1_0.eot");src:url("../../../fonts/29BC90_1_0.eot?#iefix") format("embedded-opentype"),url("../../../fonts/29BC90_1_0.woff") format("woff"),url("../../../fonts/29BC90_1_0.ttf") format("truetype"),url("../../../fonts/29BC90_1_0.svg#wf") format("svg")}@font-face{font-family:'Nexa-Book';src:url("../../../fonts/29BC90_2_0.eot");src:url("../../../fonts/29BC90_2_0.eot?#iefix") format("embedded-opentype"),url("../../../fonts/29BC90_2_0.woff") format("woff"),url("../../../fonts/29BC90_2_0.ttf") format("truetype"),url("../../../fonts/29BC90_2_0.svg#wf") format("svg")}body{font-family:"Nexa-Book",sans-serif;color:#52504d;font-size:16px !important;font-weight:300;line-height:1.375;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,#menu .nav--title,h3,h4,h5,h6{font:300 2em/1.2em "TradeGothicLT-Bold",sans-serif;color:#e6537d;margin:0 0 0.625em}form .form--title,.form--title,[role='dialog'] .modal-article .page--title,body.post-type-archive-tip #content .section--page-title,body.single-tip #content .section--page-title,body.tax-tip_taxonomy #content .section--page-title,body.post-type-archive-faq #content .section--page-title,body.single-faq #content .section--page-title,body.tax-faq_taxonomy #content .section--page-title,body.post-type-archive-howto #content .section--page-title,body.single-howto #content .section--page-title,body.tax-howto_taxonomy #content .section--page-title,body.single-tip #content .tip .page--title,body.single-faq #content .faq .page--title,body.single-howto #content .howto .page--title,body.post-type-archive-ingredient #content .section--page-title,body.single-ingredient #content .section--page-title,body.tax-ingredients_category #content .section--page-title,body.single-ingredient #content .ingredient .page--title{font-family:"ThirstyRoughRegTwo",Georgia,serif;font-size:2em;text-align:center}form .form--description,.form--description,.form--description:last-of-type,.page--separator,.competition--separator,.competition--title,.competition--question,.coupon--separator,.coupon--title,body.members .section--content label,body.members .section--content .label,body.members .section--content .fieldset--title,body.post-type-archive-tip #content .section--page-subtitle,body.single-tip #content .section--page-subtitle,body.tax-tip_taxonomy #content .section--page-subtitle,body.post-type-archive-faq #content .section--page-subtitle,body.single-faq #content .section--page-subtitle,body.tax-faq_taxonomy #content .section--page-subtitle,body.post-type-archive-howto #content .section--page-subtitle,body.single-howto #content .section--page-subtitle,body.tax-howto_taxonomy #content .section--page-subtitle,body.single-tip #content .tip .page--subtitle,body.single-faq #content .faq .page--subtitle,body.single-howto #content .howto .page--subtitle,body.post-type-archive-ingredient #content .section--page-subtitle,body.single-ingredient #content .section--page-subtitle,body.tax-ingredients_category #content .section--page-subtitle,body.single-ingredient #content .ingredient .page--subtitle{font-family:"TradeGothicLT-Bold",sans-serif;font-size:1em;margin-bottom:1.25em;margin-top:-1.25em;text-align:center;text-transform:uppercase}p{margin:0 0  1.25em 0}p:last-of-type{margin-bottom:0}em{font-style:italic}strong{font-weight:700;color:#52504d}small{font-size:80%}.large-text{font-size:2em;font-weight:bold;line-height:1em;margin-bottom:0.625em}.noscript{margin:2em 0;padding-bottom:2em;border-bottom:1px dotted #e6537d;text-align:center;text-transform:uppercase;font-family:"TradeGothicLT-Bold",sans-serif}a{-webkit-transition:height 150ms;-moz-transition:height 150ms;-o-transition:height 150ms;transition:height 150ms;color:#3c7c71;text-decoration:none;border-bottom:1px dotted transparent}a:visited{color:#3c7c71;-webkit-transition:height 150ms;-moz-transition:height 150ms;-o-transition:height 150ms;transition:height 150ms;border-bottom:1px dotted transparent}a:hover,a:active{color:#3c7c71;border-color:#3c7c71}a:focus{outline:1px dotted #292827}p a,p a:visited{line-height:inherit}a *{cursor:pointer}a figure,a img,a.image{border-bottom:none}a figure:focus,a img:focus,a.image:focus{outline-offset:-2px;outline:1px dotted white}blockquote{font-family:"TradeGothicLT-Bold",sans-serif;font-size:2em;line-height:1.125;color:#e6537d;margin-bottom:10px;position:relative;font-style:normal}blockquote p{font-size:1em;margin-bottom:0}blockquote p+p{margin-top:10px}blockquote p:before{content:"\201C";font-family:"TradeGothicLT-Bold",sans-serif}blockquote p:after{content:"\201D";font-family:"TradeGothicLT-Bold",sans-serif}blockquote span.source{display:block;font-size:0.469em;color:#52504d;font-style:normal}blockquote span.source a,blockquote span.source a:visited{color:#52504d}hr{border:solid #52504d;border-width:1px 0 0;clear:both;margin:10px 0 15px;height:0}br{height:0}address br{margin:0}address{margin:0 0 15px 0}form{margin:0 0 10px}legend{display:none}label{display:inline-block}label span,legend span{color:#52504d}.no-js .ie7 label,.no-js .ie8 label{display:block !important}form .form--item{margin-bottom:0.625em}form .form--validation{-webkit-border-radius:0.625em;-moz-border-radius:0.625em;-ms-border-radius:0.625em;-o-border-radius:0.625em;border-radius:0.625em;background:#e6537d;color:white;display:block;margin-bottom:0.625em;padding:0.625em;position:relative}form fieldset .form--validation:after{content:'';display:block;width:1em;height:1em;position:absolute;left:50%;margin-left:-0.5em;bottom:-0.5em;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);background:#e6537d}.lt-ie9 form fieldset .form--validation:after{content:none}form [type="submit"],form [type="button"],form button{-webkit-appearance:none;cursor:pointer;width:auto}form input[type="text"],form input[type="password"],form input[type="email"],form input[type="number"],form select,form textarea{-webkit-appearance:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 150ms;-moz-transition:all 150ms;-o-transition:all 150ms;transition:all 150ms;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;display:inline-block;max-width:100%;height:2.5em;margin:0 0;padding:0 1em;border:2px solid #bcb8b4;background:white;outline-width:0;vertical-align:baseline;font-size:1em;color:#52504d}form input[type="text"]:focus,form input[type="password"]:focus,form input[type="email"]:focus,form input[type="number"]:focus,form select:focus,form textarea:focus{border:2px solid #292827}form input[type="text"][readonly]:focus,form input[type="password"][readonly]:focus,form input[type="email"][readonly]:focus,form input[type="number"][readonly]:focus,form select[readonly]:focus,form textarea[readonly]:focus{border:2px solid #bcb8b4}form input[type="text"].tiny,form input[type="password"].tiny,form input[type="email"].tiny,form input[type="number"].tiny,form select.tiny,form textarea.tiny{width:10%}form input[type="text"].small,form input[type="password"].small,form input[type="email"].small,form input[type="number"].small,form select.small,form textarea.small{width:20%}form input[type="text"].large,form input[type="password"].large,form input[type="email"].large,form input[type="number"].large,form select.large,form textarea.large{width:50%}form input[type="text"].huge,form input[type="password"].huge,form input[type="email"].huge,form input[type="number"].huge,form select.huge,form textarea.huge{width:75%}form input[type="text"].tall,form input[type="password"].tall,form input[type="email"].tall,form input[type="number"].tall,form select.tall,form textarea.tall{font-size:2em;line-height:1}form input[type="text"]::-webkit-input-placeholder,form input[type="password"]::-webkit-input-placeholder,form input[type="email"]::-webkit-input-placeholder,form input[type="number"]::-webkit-input-placeholder{text-align:center;color:#7c7874}form input[type="text"]:moz-placeholder,form input[type="password"]:moz-placeholder,form input[type="email"]:moz-placeholder,form input[type="number"]:moz-placeholder{text-align:center;color:#7c7874}form input[type="text"]::-moz-placeholder,form input[type="password"]::-moz-placeholder,form input[type="email"]::-moz-placeholder,form input[type="number"]::-moz-placeholder{text-align:center;color:#7c7874}form input[type="text"]:-ms-input-placeholder,form input[type="password"]:-ms-input-placeholder,form input[type="email"]:-ms-input-placeholder,form input[type="number"]:-ms-input-placeholder{text-align:center;color:#7c7874}form input[readonly]{background:#e8e7e6}form.account input[type='radio'],.form.account input[type='radio'],.competition form input[type='radio'],form.account input[type='checkbox'],.form.account input[type='checkbox'],.competition form input[type='checkbox']{-webkit-appearance:none;position:relative;display:none}form.account input[type='radio']+label,.form.account input[type='radio']+label,.competition form input[type='radio']+label,form.account input[type='checkbox']+label,.form.account input[type='checkbox']+label,.competition form input[type='checkbox']+label{display:-moz-inline-stack;display:inline-block;vertical-align:middle;*vertical-align:auto;zoom:1;*display:inline;margin-left:1.5em;margin-right:0;line-height:1.2em;cursor:pointer;position:relative}form.account input[type='radio']+label i,.form.account input[type='radio']+label i,.competition form input[type='radio']+label i,form.account input[type='checkbox']+label i,.form.account input[type='checkbox']+label i,.competition form input[type='checkbox']+label i{background:#bcb8b4;width:1.2em;height:1.2em;padding:0;top:1.3em;left:-1.5em;position:absolute}form.account input[type='radio']:checked+label i,.form.account input[type='radio']:checked+label i,.competition form input[type='radio']:checked+label i,form.account input[type='radio'].checked+label i,.form.account input[type='radio'].checked+label i,.competition form input[type='radio'].checked+label i,form.account input[type='checkbox']:checked+label i,.form.account input[type='checkbox']:checked+label i,.competition form input[type='checkbox']:checked+label i,form.account input[type='checkbox'].checked+label i,.form.account input[type='checkbox'].checked+label i,.competition form input[type='checkbox'].checked+label i{color:white}form.account input[type='radio']:checked+label,.form.account input[type='radio']:checked+label,.competition form input[type='radio']:checked+label,form.account input[type='radio'].checked+label,.form.account input[type='radio'].checked+label,.competition form input[type='radio'].checked+label,form.account input[type='checkbox']:checked+label,.form.account input[type='checkbox']:checked+label,.competition form input[type='checkbox']:checked+label,form.account input[type='checkbox'].checked+label,.form.account input[type='checkbox'].checked+label,.competition form input[type='checkbox'].checked+label{color:#52504d}.lt-ie9 form.account input[type='radio']+label i,.lt-ie9 .form.account input[type='radio']+label i,.lt-ie9 .competition form input[type='radio']+label i,.competition .lt-ie9 form input[type='radio']+label i,.lt-ie9 form.account input[type='radio']:active+label i,.lt-ie9 .form.account input[type='radio']:active+label i,.lt-ie9 .competition form input[type='radio']:active+label i,.competition .lt-ie9 form input[type='radio']:active+label i,.lt-ie9 form.account input[type='radio']:checked+label i:after,.lt-ie9 .form.account input[type='radio']:checked+label i:after,.lt-ie9 .competition form input[type='radio']:checked+label i:after,.competition .lt-ie9 form input[type='radio']:checked+label i:after,.lt-ie9 form.account input[type='radio'].checked+label i:after,.lt-ie9 .form.account input[type='radio'].checked+label i:after,.lt-ie9 .competition form input[type='radio'].checked+label i:after,.competition .lt-ie9 form input[type='radio'].checked+label i:after,form.account input[type='radio'].checked+label i:after,.form.account input[type='radio'].checked+label i:after,.competition form input[type='radio'].checked+label i:after,.lt-ie9 form.account input[type='checkbox']+label i,.lt-ie9 .form.account input[type='checkbox']+label i,.lt-ie9 .competition form input[type='checkbox']+label i,.competition .lt-ie9 form input[type='checkbox']+label i,.lt-ie9 form.account input[type='checkbox']:active+label i,.lt-ie9 .form.account input[type='checkbox']:active+label i,.lt-ie9 .competition form input[type='checkbox']:active+label i,.competition .lt-ie9 form input[type='checkbox']:active+label i,.lt-ie9 form.account input[type='checkbox']:checked+label i:after,.lt-ie9 .form.account input[type='checkbox']:checked+label i:after,.lt-ie9 .competition form input[type='checkbox']:checked+label i:after,.competition .lt-ie9 form input[type='checkbox']:checked+label i:after,.lt-ie9 form.account input[type='checkbox'].checked+label i:after,.lt-ie9 .form.account input[type='checkbox'].checked+label i:after,.lt-ie9 .competition form input[type='checkbox'].checked+label i:after,.competition .lt-ie9 form input[type='checkbox'].checked+label i:after,form.account input[type='checkbox'].checked+label i:after,.form.account input[type='checkbox'].checked+label i:after,.competition form input[type='checkbox'].checked+label i:after{display:none}.lt-ie9 form.account input[type='radio'],.lt-ie9 .form.account input[type='radio'],.lt-ie9 .competition form input[type='radio'],.competition .lt-ie9 form input[type='radio'],.lt-ie9 form.account input[type='checkbox'],.lt-ie9 .form.account input[type='checkbox'],.lt-ie9 .competition form input[type='checkbox'],.competition .lt-ie9 form input[type='checkbox']{display:inline;background:none !important;padding-left:0;width:auto;float:left}.lt-ie9 form.account input[type='radio']+label,.lt-ie9 .form.account input[type='radio']+label,.lt-ie9 .competition form input[type='radio']+label,.competition .lt-ie9 form input[type='radio']+label,.lt-ie9 form.account input[type='checkbox']+label,.lt-ie9 .form.account input[type='checkbox']+label,.lt-ie9 .competition form input[type='checkbox']+label,.competition .lt-ie9 form input[type='checkbox']+label{margin-left:0px;vertical-align:middle}form.account input[type='radio']+label,.form.account input[type='radio']+label,.competition form input[type='radio']+label{display:block;margin-bottom:0.3125em}form.account input[type='radio']+label i,.form.account input[type='radio']+label i,.competition form input[type='radio']+label i{-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;-o-border-radius:100%;border-radius:100%;background:white;border:4px solid #e6537d;height:0.75em;margin-top:-1.4em;width:0.75em}form.account input[type='radio'].checked+label i:after,.form.account input[type='radio'].checked+label i:after,.competition form input[type='radio'].checked+label i:after,form.account input[type='radio']:checked+label i:after,.form.account input[type='radio']:checked+label i:after,.competition form input[type='radio']:checked+label i:after{-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;-o-border-radius:100%;border-radius:100%;content:' ';width:0.5em;height:0.5em;position:absolute;top:50%;left:50%;margin-top:-0.25em;margin-left:-0.25em;background:#e6537d;text-shadow:0px}form.account input[type='checkbox']+label i,.form.account input[type='checkbox']+label i,.competition form input[type='checkbox']+label i{margin-top:-1.5em;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;-webkit-transition:all 150ms;-moz-transition:all 150ms;-o-transition:all 150ms;transition:all 150ms}form.account input[type='checkbox'].checked+label i,.form.account input[type='checkbox'].checked+label i,.competition form input[type='checkbox'].checked+label i,form.account input[type='checkbox']:checked+label i,.form.account input[type='checkbox']:checked+label i,.competition form input[type='checkbox']:checked+label i{background:#e6537d}form.account input[type='checkbox']:hover+label i:after,.form.account input[type='checkbox']:hover+label i:after,.competition form input[type='checkbox']:hover+label i:after,form.account input[type='checkbox']+label:hover i:after,.form.account input[type='checkbox']+label:hover i:after,.competition form input[type='checkbox']+label:hover i:after,form.account input[type='checkbox']+label i:hover:after,.form.account input[type='checkbox']+label i:hover:after,.competition form input[type='checkbox']+label i:hover:after,form.account input[type='checkbox'].checked+label i:after,.form.account input[type='checkbox'].checked+label i:after,.competition form input[type='checkbox'].checked+label i:after,form.account input[type='checkbox']:checked+label i:after,.form.account input[type='checkbox']:checked+label i:after,.competition form input[type='checkbox']:checked+label i:after{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:'\f00c';font-size:1em;position:absolute;width:1.2em;height:1.2em;line-height:1.2em;text-align:center;z-index:2;color:white}@font-face{font-family:'FontAwesome';src:url("../../../fonts/fontawesome-webfont.eot?v=3.2.1");src:url("../../../fonts/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"),url("../../../fonts/fontawesome-webfont.woff?v=3.2.1") format("woff"),url("../../../fonts/fontawesome-webfont.ttf?v=3.2.1") format("truetype"),url("../../../fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg");font-weight:normal;font-style:normal}

Examples and source code

icon-star

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

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

icon-star

icon-star

icon-star

icon-star

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

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

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

CSS3 animations aren't supported in IE8 - IE9.

icon-star on icon-check-empty
icon-star on icon-circle
icon-starl on icon-sign-blank
icon-ban-circle on icon-star

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