Font Awesome icon usage statistics

  • 9 types of Font Awesome iconic font are used and found 16 times in total.
  • ABIB-SOFTWARE.DE used 1.8 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of ABIB-SOFTWARE.DE are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • ABIB-SOFTWARE.DE includes "https://www.abib-software.de/assets/css/623bc044-collection.css" to use Font Awesome and information from CSS is like below.
  • @font-face{font-family:'Roboto';src:url("/files/abib/layout/font/Roboto-Light-webfont.eot");src:url("/files/abib/layout/font/Roboto-Light-webfont.eot?#iefix") format("embedded-opentype"),url("/files/abib/layout/font/Roboto-Light-webfont.woff") format("woff"),url("/files/abib/layout/font/Roboto-Light-webfont.ttf") format("truetype"),url("/files/abib/layout/font/Roboto-Light-webfont.svg#robotolight") format("svg");font-weight:normal;font-style:normal}@font-face{font-family:'Roboto Condensed';src:url("/files/abib/layout/font/RobotoCondensed-Regular-webfont.eot");src:url("/files/abib/layout/font/RobotoCondensed-Regular-webfont.eot?#iefix") format("embedded-opentype"),url("/files/abib/layout/font/RobotoCondensed-Regular-webfont.woff") format("woff"),url("/files/abib/layout/font/RobotoCondensed-Regular-webfont.ttf") format("truetype"),url("/files/abib/layout/font/RobotoCondensed-Regular-webfont.svg#roboto_condensedregular") format("svg");font-weight:normal;font-style:normal}html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,a,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,nav,section,menu,time,mark,audio,video,canvas{margin:0;padding:0;border:0;font-size:1em}ul,li{list-style-type:none}.block{overflow:hidden}.clearfix:after,.group:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}.clearfix,.group{display:inline-block}* html .clearfix,.group{height:1%}.clearfix,.group{display:block}html{height:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{min-height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,audio,canvas,video{display:block}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}b,strong{font-weight:bold}abbr[title]{border-bottom:1px dotted}input,textarea,button,select{margin:0;font-size:100%;line-height:normal;vertical-align:baseline}button,html input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}textarea{overflow:auto}table{border-collapse:collapse;border-spacing:0}figure{position:relative}figure img,figure object,figure embed,figure video,figcaption{max-width:100%;display:block}img{border:0;-ms-interpolation-mode:bicubic}.verysmall{font-size:0.625em;line-height:2.4em}.small{font-size:0.75em;line-height:2em}.smaller{font-size:0.9375em;line-height:1.6em}.normal{font-size:1em;line-height:1.5em}.large{font-size:1.5em;line-height:1em}.bigger{font-size:1.125em;line-height:1.33333em}.big{font-size:1.25em;line-height:1.2em}.huger{font-size:1.875em;line-height:1.6em;margin:0.8em 0 0.8em}.huge{font-size:2.75em;line-height:1.09091em;margin:0.54545em 0 0.54545em}.massive{font-size:4.5em;line-height:1.66667em}.gigantic{font-size:6.875em;line-height:1.09091em}.subtitle{display:block;color:#999;font-size:1.125em;letter-spacing:0.2em;line-height:1.33333em;margin-top:-1.33333em;margin-bottom:1.33333em}body{background:#fbfbfb;background-attachment:fixed;color:#666;font-family:"Roboto", Tahoma, Arial, sans-serif;font-size:1em;font-weight:300;line-height:1.5em}h1{color:#3b3b3b;line-height:1.5em;font-size:inherit}h2{font-size:2.75em;line-height:1.09091em;margin:0.54545em 0 0.54545em;color:#222;display:inline-block;letter-spacing:0;font-family:"Roboto", Tahoma, Arial, sans-serif;font-weight:300}h3{font-size:1em;line-height:1.5em;color:#3b3b3b;letter-spacing:0;font-family:"Roboto Condensed", Tahoma, Arial, sans-serif;font-weight:400;margin:1.125em 0 0.375em}h4{font-size:1em;line-height:1.5em;color:#3b3b3b;letter-spacing:0;font-family:"Roboto Condensed", Tahoma, Arial, sans-serif;font-weight:400;margin:0 0 0}.row{overflow:hidden;position:relative;z-index:1;padding-top:1em;padding-bottom:0em}.row .row-header{width:100%;overflow:hidden}.row .row-header .ce_headline{max-width:71em;padding-left:1em;padding-right:1em;margin-left:auto;margin-right:auto}.row .row-header .ce_headline:after{content:"";display:table;clear:both}#first-child .row{border-top:1px solid #e0e0e0}.row.dark,.row--dark{background-color:#3b3b3b;border-top:1px solid #222222;border-bottom:1px solid #222222}.row.dark *,.row--dark *{color:#fbfbfb}.row.gray,.row--gray{background-color:#eaeaea;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0}.row--dark:after,.row--blue:after{bottom:0;content:"";height:100%;left:0;position:absolute;right:0;width:100%;z-index:-1}.row--blue{background-color:#1d60a2;border-top:1px solid #444444;border-bottom:1px solid #444444}.row--blue *{color:#fbfbfb}.container{max-width:71em;padding-left:1em;padding-right:1em;margin-left:auto;margin-right:auto}.container:after{content:"";display:table;clear:both}.container-2,.container-3,.container-4,.container-5,.container-6,.container-8{max-width:71em;padding-left:1em;padding-right:1em;margin-left:auto;margin-right:auto}.container-2:after,.container-3:after,.container-4:after,.container-5:after,.container-6:after,.container-8:after{content:"";display:table;clear:both}.container-2>div,.container-2>section,.container-3>div,.container-3>section,.container-4>div,.container-4>section,.container-5>div,.container-5>section,.container-6>div,.container-6>section,.container-8>div,.container-8>section{overflow:hidden}.container-2>.g-full,.container-3>.g-full,.container-4>.g-full,.container-5>.g-full,.container-6>.g-full,.container-8>.g-full{clear:both;display:block;width:100%;margin-right:0}@media (min-width: 41em){.row{padding-top:1em;padding-bottom:1em}.container-2>div,.container-2>section,.container-3>div,.container-3>section,.container-4>div,.container-4>section{width:47.82609%;float:left;margin-right:4.34783%}.container-2>div:nth-child(2n),.container-2>section:nth-child(2n),.container-3>div:nth-child(2n),.container-3>section:nth-child(2n),.container-4>div:nth-child(2n),.container-4>section:nth-child(2n){width:47.82609%;float:right;margin-right:0}.container-5>div,.container-5>section{width:100%;float:left;margin-right:4.34783%}.container-6>div,.container-6>section{width:21.73913%;float:left;margin-right:4.34783%}.container-6>div:nth-child(4n),.container-6>section:nth-child(4n){width:21.73913%;float:right;margin-right:0}.container-8>div,.container-8>section{width:100%;float:left;margin-right:4.34783%}.container-8>div:nth-child(2n),.container-8>section:nth-child(2n){width:100%;float:right;margin-right:0}}@media (min-width: 49em){.row{padding-top:1.5em;padding-bottom:1.5em}.container-2>div,.container-2>section,.container-4>div,.container-4>section{width:48.57143%;float:left;margin-right:2.85714%}.container-2>div:nth-child(2n),.container-2>section:nth-child(2n),.container-4>div:nth-child(2n),.container-4>section:nth-child(2n){width:48.57143%;float:right;margin-right:0}.container-3 div,.container-3 section{width:31.42857%;float:left;margin-right:2.85714%}.container-3 div:nth-child(2n),.container-3 section:nth-child(2n){width:31.42857%;float:left;margin-right:2.85714%}.container-3 div:nth-child(3n),.container-3 section:nth-child(3n){width:31.42857%;float:right;margin-right:0}.container-3 div:nth-child(4n),.container-3 section:nth-child(4n){clear:right}.container-4:nth-child(3n){clear:right}.container-6 div,.container-6 section{width:14.28571%;float:left;margin-right:2.85714%}.container-6 div:nth-child(2n),.container-6 section:nth-child(2n){width:14.28571%;float:left;margin-right:2.85714%}.container-6 div:nth-child(3n),.container-6 section:nth-child(3n){width:14.28571%;float:right;margin-right:0}.container-6 div:nth-child(4n),.container-6 section:nth-child(4n){width:14.28571%;float:left;margin-right:2.85714%}.container-5>div,.container-5>section{width:31.42857%;float:left;margin-right:2.85714%}.container-5>div:nth-child(2n),.container-5>section:nth-child(2n){width:65.71429%;float:right;margin-right:0}.container-8>div,.container-8>section{width:65.71429%;float:left;margin-right:2.85714%}.container-8>div:nth-child(2n),.container-8>section:nth-child(2n){width:31.42857%;float:right;margin-right:0}}@media (min-width: 71em){.row{padding-top:3em;padding-bottom:3em}.container-2>div,.container-2>section{width:49.29577%;float:left;margin-right:1.40845%}.container-2>div:nth-child(2n),.container-2>section:nth-child(2n){width:49.29577%;float:right;margin-right:0}.container-3>div,.container-3>section{width:32.39437%;float:left;margin-right:1.40845%}.container-3>div:nth-child(2n),.container-3>section:nth-child(2n){width:32.39437%;float:left;margin-right:1.40845%}.container-3>div:nth-child(3n),.container-3>section:nth-child(3n){width:32.39437%;float:right;margin-right:0}.container-4>div,.container-4>section{width:23.94366%;float:left;margin-right:1.40845%}.container-4>div:nth-child(2n),.container-4>section:nth-child(2n){width:23.94366%;float:left;margin-right:1.40845%}.container-4>div:nth-child(3n),.container-4>section:nth-child(3n){clear:none}.container-4>div:nth-child(4n),.container-4>section:nth-child(4n){width:23.94366%;float:right;margin-right:0}.container-4>div:nth-child(5n),.container-4>section:nth-child(5n){clear:right}.container-6>div,.container-6>section{width:15.49296%;float:left;margin-right:1.40845%}.container-6>div:nth-child(2n),.container-6>section:nth-child(2n){width:15.49296%;float:left;margin-right:1.40845%}.container-6>div:nth-child(3n),.container-6>section:nth-child(3n){width:15.49296%;float:left;margin-right:1.40845%}.container-6>div:nth-child(6n),.container-6>section:nth-child(6n){width:15.49296%;float:right;margin-right:0}.container-5>div,.container-5>section{width:32.39437%;float:left;margin-right:1.40845%}.container-5>div:nth-child(2n),.container-5>section:nth-child(2n){width:66.19718%;float:right;margin-right:0}.container-8>div,.container-8>section{width:66.19718%;float:left;margin-right:1.40845%}.container-8>div:nth-child(2n),.container-8>section:nth-child(2n){width:32.39437%;float:right;margin-right:0}}@font-face{font-family:'FontAwesome';src:url("/files/abib/layout/font/fontawesome-webfont.eot?v=3.2.1");src:url("/files/abib/layout/font/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"),url("/files/abib/layout/font/fontawesome-webfont.woff?v=3.2.1") format("woff"),url("/files/abib/layout/font/fontawesome-webfont.ttf?v=3.2.1") format("truetype"),url("/files/abib/layout/font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg");font-weight:normal;font-style:normal}

Examples and source code

icon-ok

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

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

icon-ok

icon-ok

icon-ok

icon-ok

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

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

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

CSS3 animations aren't supported in IE8 - IE9.

icon-ok on icon-check-empty
icon-ok on icon-circle
icon-okl on icon-sign-blank
icon-ban-circle on icon-ok

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