Font Awesome icon usage statistics

  • 0 types of Font Awesome iconic font are used and found 0 times in total.
  • SUTEKNO.COM used 0 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of SUTEKNO.COM are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • SUTEKNO.COM includes "http://www.sutekno.com/wp-content/themes/sibos/includes/fonts/css/fonts.min.css" to use Font Awesome and information from CSS is like below.
  • @font-face{font-family:openwebicons;src:url(../font/openwebicons.eot);src:url(../font/openwebicons.eot?#iefix) format('embedded-opentype'),url(../font/openwebicons.woff) format('woff'),url(../font/openwebicons.ttf) format('truetype'),url(../font/openwebicons.svg#openweb_openwebiconssregular) format('svg');font-weight:400;font-style:normal}.openwebicons{position:relative;top:1px;display:inline-block;font-family:openwebicons;-webkit-font-smoothing:antialiased;font-style:normal;font-weight:400;line-height:1}.openwebicons-apml:before{content:"\f001"}.openwebicons-apml-colored:before{content:"\f001";color:#AFDD63}.openwebicons-open-share:before{content:"\f00E"}.openwebicons-open-share-simple:before{content:"\f00F"}.openwebicons-open-share-colored:before{content:"\f00E";color:#538439}.openwebicons-share:before{content:"\f006"}.openwebicons-share-simple:before{content:"\f007"}.openwebicons-share-colored:before{content:"\f006";color:#538439}.openwebicons-feed:before{content:"\f009"}.openwebicons-feed-simple:before{content:"\f00A"}.openwebicons-feed-colored:before{content:"\f009";color:#EA680B}.openwebicons-ostatus:before{content:"\f004"}.openwebicons-ostatus-simple:before{content:"\f005"}.openwebicons-ostatus-colored:before{content:"\f004";color:#F60}.openwebicons-opml:before{content:"\f003"}.openwebicons-opml-colored:before{content:"\f003";color:#2490A1}.openwebicons-activity:before{content:"\f010"}.openwebicons-activity-simple:before{content:"\f041"}.openwebicons-activity-colored:before{content:"\f010";color:#4FB2D9}.openwebicons-microformats:before{content:"\f00C"}.openwebicons-microformats-colored:before{content:"\f00C";color:#85BC07}.openwebicons-geo:before{content:"\f00B"}.openwebicons-geo-colored:before{content:"\f00B";color:#900}.openwebicons-opensearch:before{content:"\f002"}.openwebicons-opensearch-colored:before{content:"\f002";color:#5050f3}.openwebicons-oauth:before{content:"\f008"}.openwebicons-openid:before{content:"\f00D"}.openwebicons-semantic-web:before{content:"\f000"}.openwebicons-rdf:before{content:"\f039"}.openwebicons-rdfa:before{content:"\f039"}.openwebicons-owl:before{content:"\f039"}.openwebicons-dataportability:before{content:"\f013"}.openwebicons-federated:before{content:"\f011"}.openwebicons-web-intents:before{content:"\f014"}.openwebicons-open-web:before{content:"\f012"}.openwebicons-xmpp:before{content:"\f015"}.openwebicons-html5:before{content:"\f016"}.openwebicons-html5-colored:before{content:"\f016";color:#E34C26}.openwebicons-css3:before{content:"\f017"}.openwebicons-connectivity:before{content:"\f018"}.openwebicons-semantics:before{content:"\f019"}.openwebicons-3deffects:before{content:"\f037"}.openwebicons-device-access:before{content:"\f031"}.openwebicons-multimedia:before{content:"\f032"}.openwebicons-offline-storage:before{content:"\f033"}.openwebicons-perfintegration:before{content:"\f034"}.openwebicons-git:before{content:"\f035"}.openwebicons-git-colored:before{content:"\f035";color:#F05133}.openwebicons-webhooks:before{content:"\f036"}.openwebicons-osi:before{content:"\f038"}.openwebicons-opensource:before{content:"\f038"}.openwebicons-osi-colored:before{content:"\f038";color:#3DA639}.openwebicons-opensource-colored:before{content:"\f038";color:#3DA639}.openwebicons-opengraph:before{content:"\f020"}.openwebicons-epub:before{content:"\f021"}.openwebicons-epub-colored:before{content:"\f021";color:#85b916}.openwebicons-qr:before{content:"\f022"}.openwebicons-foaf:before{content:"\f023"}.openwebicons-info-card:before{content:"\f024"}.openwebicons-info-card-colored:before{content:"\f024";color:#BF84E5}.openwebicons-browserid:before{content:"\f025"}.openwebicons-remote-storage:before{content:"\f026"}.openwebicons-remote-storage-colored:before{content:"\f026";color:#ff4e09}.openwebicons-persona:before{content:"\f027"}.openwebicons-odata:before{content:"\f028"}.openwebicons-odata-colored:before{content:"\f028";color:#EA680B}.openwebicons-markdown:before{content:"\f029"}.openwebicons-tosdr:before{content:"\f030"}.openwebicons-pub:before{content:"\f045"}.openwebicons-sub:before{content:"\f046"}.openwebicons-hubbub:before{content:"\f045"}.openwebicons-pub-colored:before{content:"\f045";color:#9c0}.openwebicons-sub-colored:before{content:"\f046";color:#ff0}.openwebicons-hubbub-colored:before{content:"\f045";color:#ff6fcf}.openwebicons-pubsubhubbub:before{content:"\f047"}.openwebicons-cc:before{content:"\f080"}.openwebicons-cc-by:before{content:"\f081"}.openwebicons-cc-nc:before{content:"\f082"}.openwebicons-cc-nc-eu:before{content:"\f083"}.openwebicons-cc-nc-jp:before{content:"\f084"}.openwebicons-cc-sa:before{content:"\f085"}.openwebicons-cc-nd:before{content:"\f086"}.openwebicons-cc-public:before{content:"\f087"}.openwebicons-cc-zero:before{content:"\f088"}.openwebicons-cc-share:before{content:"\f089"}.openwebicons-cc-remix:before{content:"\f08a"}.openwebicons-hatom:before{content:"\f040"}.openwebicons-hresume:before{content:"\f042"}.openwebicons-hcard-add:before{content:"\f043"}.openwebicons-hcard-download:before{content:"\f044"}.openwebicons-indieweb:before{content:"\f08b \f08c"}.openwebicons-indiewebcamp:before{content:"\f08b \f08c \f08d"}.openwebicons-webfinger:before{content:"\f08e"}.openwebicons-bitcoin:before{content:"\f08f"}.openwebicons-bitcoin-simple:before{content:"\f090"}.openwebicons-svg:before{content:"\f049"}.openwebicons-json-ld:before{content:"\f048"}.openwebicons-tent:before{content:"\f050"}@font-face{font-family:FontAwesome;src:url(../font/fontawesome-webfont.eot?v=3.2.1);src:url(../font/fontawesome-webfont.eot?#iefix&v=3.2.1) format('embedded-opentype'),url(../font/fontawesome-webfont.woff?v=3.2.1) format('woff'),url(../font/fontawesome-webfont.ttf?v=3.2.1) format('truetype'),url(../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1) format('svg');font-weight:400;font-style:normal}

Examples and source code

fa-lemon-o hidden-print t1

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

<i class=" fa-lemon-o hidden-print t1"></i> fa-lemon-o hidden-print t1
Icon classes are echoed via CSS :before.

fa-lemon-o hidden-print t1

fa-lemon-o hidden-print t1

fa-lemon-o hidden-print t1

fa-lemon-o hidden-print t1

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

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

<i class=" fa-lemon-o hidden-print t1 icon-2x icon-spin"></i>
<i class=" fa-lemon-o hidden-print t1 icon-3x icon-spin"></i>
<i class=" fa-lemon-o hidden-print t1 icon-4x icon-spin"></i>

CSS3 animations aren't supported in IE8 - IE9.

fa-lemon-o hidden-print t1 on icon-check-empty
fa-lemon-o hidden-print t1 on icon-circle
fa-lemon-o hidden-print t1l on icon-sign-blank
icon-ban-circle on fa-lemon-o hidden-print t1

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