Font Awesome icon usage statistics

  • 5 types of Font Awesome iconic font are used and found 5 times in total.
  • SILUX.HR used 1.0 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of SILUX.HR are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • SILUX.HR includes "http://www.SILUX.HR/media/cache/aa4c09657e04751801f8d3a4ab264744.css" to use Font Awesome and information from CSS is like below.
  • @font-face{font-family:'TradeGothic-Light';src:url('/media/fonts/tradegothicltcomlight.eot');src:url('/media/fonts/tradegothicltcomlight.eot?#iefix') format('embedded-opentype'),url('/media/fonts/tradegothicltcomlight.woff') format('woff'),url('/media/fonts/tradegothicltcomlight.ttf') format('truetype'),url('/media/fonts/tradegothicltcomlight.svg#tradegothicltcomlight') format('svg');font-weight:normal;font-style:normal;}@font-face{font-family:'TradeGothic-Bold';src:url('/media/fonts/tradegothicltcombdcn20.eot');src:url('/media/fonts/tradegothicltcombdcn20.eot?#iefix') format('embedded-opentype'),url('/media/fonts/tradegothicltcombdcn20.woff') format('woff'),url('/media/fonts/tradegothicltcombdcn20.ttf') format('truetype'),url('/media/fonts/tradegothicltcombdcn20.svg#tradegothicltcombdcn20') format('svg');font-weight:normal;font-style:normal;}@font-face{font-family:'TradeGothicLTComBoldNo2';src:url('/media/fonts/tradegothicltcom-bd2.eot');src:url('/media/fonts/tradegothicltcom-bd2.eot') format('embedded-opentype'),url('/media/fonts/tradegothicltcom-bd2.woff') format('woff'),url('/media/fonts/tradegothicltcom-bd2.ttf') format('truetype'),url('/media/fonts/tradegothicltcom-bd2.svg#TradeGothicLTComBoldNo.2') format('svg');font-weight:normal;font-style:normal;}body{font-family:'TradeGothic-Light';}h1,h2,h3,h4,h5,h6{font-family:'TradeGothic-Bold';font-weight:normal;line-height:1.3em;}h2.rel{margin-bottom:25px;}header{padding-top:25px;margin-bottom:20px;}strong{font-weight:normal;font-family:'TradeGothicLTComBoldNo2';}.table th{font-weight:normal;font-family:'TradeGothicLTComBoldNo2';}#logo{padding-bottom:25px;}@media (max-width:767px){#logo{text-align:center;}#kayako_sitebadgecontainer{display:none;}}#logo h1{margin:0;}#logo h2{display:none;}#logo div{display:none;}#headphone .hpwrap{padding:2px 0 10px 80px;border-left:1px solid #ddd;background:url(/media/dsg/ico-header-phone.png) no-repeat 20px center;}#headphone h5{color:#666;font-size:14px;font-family:'TradeGothic-Light';margin-bottom:3px;}#headphone span{color:#ccc;margin-right:20px;font-size:18px;}#headphone a{font-family:'TradeGothic-Bold';font-size:20px;text-transform:uppercase;}@media all and (min-width:980px) and (max-width:1199px){#headphone .hpwrap{padding:0 0 10px 70px;background-position:15px center;}#headphone a{font-size:16px;}}@media all and (min-width:768px) and (max-width:979px){#headphone .hpwrap{padding:0 0 10px 10px;background:none;}#headphone a{font-size:16px;}}@media all and (max-width:767px){#headphone h5{display:inline-block;margin-right:30px;}#headphone a{font-size:16px;}#headphone .hpwrap{padding:0;border:0;background:none;}}#container{/*margin-bottom:30px;*/min-height:450px;height:auto !important;height:500px;}#facebook-container{width:810px;}.navbar{margin:0;}.breadcrumb{padding:0 0 10px;background:none;border-bottom:1px solid #ddd;}#feature-wrapper .royalSlider{width:100%;height:380px;}.icheckitem{float:left;margin-left:-20px !important;margin-right:10px !important;}.control-group span.error{color:red;}/* FOOTER */footer{margin-top:50px;}footer .container-fluid{padding:0;}footer .row{margin-bottom:20px;}footer h3{text-transform:uppercase;color:#999999;font-size:24px;}.footer_disclaimer{font-size:11px;color:#999999;padding:10px 0;line-height:16px;}.clients{text-align:center;margin-bottom:0 !important;}.clients > div{padding-top:30px;position:relative;}.clients img.teampic{margin-top:30px;}.clients h3{margin-bottom:20px;}.fmenus{margin-bottom:10px !important;}.fmenus .hr{padding-top:20px;border-top:1px solid #ddd;}.fmenus span.h3{font-family:'TradeGothic-Bold';font-size:18px;color:#999;margin-right:10px;}.fmenus ul{display:inline-block;margin:0;}.fmenus ul.flags{position:relative;top:-3px;}/*ul#footer_menu_r,ul#footer_menu_l {*//*list-style:none;*//*margin:0;*//*}*//*ul#footer_menu_r li,ul#footer_menu_l li{*//*margin:0 0 5px;*//*}*//*WHYBUY*/.whybuy-container{background:#fafafa;margin-bottom:20px;border-top:1px solid #ddd;border-bottom:1px solid #eee;position:relative;z-index:99;}.whybuy-container .wbwrap{padding:10px 0 0 80px;}.whybuy-container li{background:url(/media/dsg/bullet.gif) no-repeat left center;padding-left:20px !important;margin-left:10px !important;}.whybuy-container li:first-child{background:none;margin-left:0 !important;}.whybuy-container li a{color:#8c9192;font-size:14px;}.whybuy-container li a:hover{text-decoration:none;}#ico-whybuy{position:absolute;top:-2px;left:10px;}@media (min-width:980px) and (max-width:1199px){.whybuy-container li{padding-left:10px !important;margin-left:0px !important;}.whybuy-container li a{font-size:13px;}}@media (max-width:979px){.whybuy-container{display:none;}}#cc-notification{position:absolute !important;opacity:0.9;}/* BOOTSTRAP OVERRIDES */.lead{font-size:16px;line-height:24px;}hr{margin:20px 0;border:0;border-top:2px solid #eee;border-bottom:1px solid #fff;}.btn{border:1px solid #cccccc;*border:0;border-color:#b3b3b3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;font-size:18px;font-family:'TradeGothic-Bold';text-transform:uppercase;padding:8px 15px;}.btn-primary{color:#FFFFFF;text-shadow:0px 1px 1px rgba(0,0,0,0.5);filter:dropshadow(color=#000000,offx=0,offy=1);background-color:#0189CC;*background-color:#0189CC;background-image:-moz-linear-gradient(top,#1497D5,#0189CC);background-image:-webkit-gradient(linear,0 0,0 100%,from(#1497D5),to(#0189CC));background-image:-webkit-linear-gradient(top,#1497D5,#0189CC);background-image:-o-linear-gradient(top,#1497D5,#0189CC);background-image:linear-gradient(to bottom,#1497D5,#0189CC);background-repeat:repeat-x;border-color:#0189CC;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1497D5',endColorstr='#0189CC',GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);}.btn-mini{font-size:13px;padding:4px 5px;font-family:'TradeGothic-Light';line-height:1;}.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled]{color:#FFFFFF;background-color:#0189CC;*background-color:#003bb3;}.btn-group>.btn:first-child{margin-left:0;-webkit-border-radius:2px;border-radius:2px;-moz-border-radius:2px;}.btn-group>.btn:last-child,.btn-group>.dropdown-toggle{-webkit-border-top-right-radius:2px;border-top-right-radius:2px;-webkit-border-bottom-right-radius:2px;border-bottom-right-radius:2px;-moz-border-radius-topright:2px;-moz-border-radius-bottomright:2px;-moz-border-radius-bottomright:2px;}.breadcrumb a:hover,.breadcrumb a:focus{text-decoration:none;}.breadcrumb > li li{text-shadow:none;}.breadcrumb b{position:relative;top:1px;}fieldset{background:#fafafa;padding:20px; /* 0;*/border-top:1px solid #eee;border-bottom:1px solid #eee;margin-bottom:20px;}fieldset .help-block{font-size:10px;color:#ccc;margin-top:0 !important;}fieldset .tooltip-inner{background:#3ea6de;color:#fff;font-size:12px;max-width:400px;}fieldset .tooltip.right .tooltip-arrow{border-right-color:#3ea6de;}.modal-header{color:#000;}.modal-body{max-height:600px !important;height:auto !important;color:#333;}.pagination{text-align:center;}.pagination-left{text-align:left;}.pagination ul > li > a,.pagination ul > li > span{padding:7px 15px;}.tooltip-inner{text-align:left;font-size:12px;}.alert .modal-header .close{/*position:absolute;*/position:inherit;}.banner-area{margin-top:10px;padding:12px 10px 8px;background:#eee;text-align:center;border-bottom:1px solid #ddd;font-size:18px;}.banner-area span,.banner-area strong{font-family:'TradeGothic-Bold';}.banner-area span span{color:#0189CC;}
    @font-face{font-family:'FontAwesome';src:url('/media/fonts/fontawesome-webfont.eot?v=3.2.1');src:url('/media/fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),url('/media/fonts/fontawesome-webfont.woff?v=3.2.1') format('woff'),url('/media/fonts/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),url('/media/fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');font-weight:normal;font-style:normal;}

Examples and source code

icon-shield

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

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

icon-shield

icon-shield

icon-shield

icon-shield

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

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

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

CSS3 animations aren't supported in IE8 - IE9.

icon-shield on icon-check-empty
icon-shield on icon-circle
icon-shieldl on icon-sign-blank
icon-ban-circle on icon-shield

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