Font Awesome icon usage statistics

  • 12 types of Font Awesome iconic font are used and found 22 times in total.
  • PAPILION.PL used 1.8 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of PAPILION.PL are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • PAPILION.PL includes "http://static1.redcart.pl/templates/t_12650/css/minify_31.css" to use Font Awesome and information from CSS is like below.
  • @font-face{font-family:'revicons';src:url('../font/revicons.eot?5510888');src:url('../font/revicons.eot?5510888#iefix') format('embedded-opentype'),url('../font/revicons.woff?5510888') format('woff'),url('../font/revicons.ttf?5510888') format('truetype'),url('../font/revicons.svg?5510888#revicons') format('svg');font-weight:normal;font-style:normal}[class^="revicon-"]:before,[class*=" revicon-"]:before{font-family:"revicons";font-style:normal;font-weight:normal;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em}.revicon-search-1:before{content:'\e802'}.revicon-pencil-1:before{content:'\e831'}.revicon-picture-1:before{content:'\e803'}.revicon-cancel:before{content:'\e80a'}.revicon-info-circled:before{content:'\e80f'}.revicon-trash:before{content:'\e801'}.revicon-left-dir:before{content:'\e817'}.revicon-right-dir:before{content:'\e818'}.revicon-down-open:before{content:'\e83b'}.revicon-left-open:before{content:'\e819'}.revicon-right-open:before{content:'\e81a'}.revicon-angle-left:before{content:'\e820'}.revicon-angle-right:before{content:'\e81d'}.revicon-left-big:before{content:'\e81f'}.revicon-right-big:before{content:'\e81e'}.revicon-magic:before{content:'\e807'}.revicon-picture:before{content:'\e800'}.revicon-export:before{content:'\e80b'}.revicon-cog:before{content:'\e832'}.revicon-login:before{content:'\e833'}.revicon-logout:before{content:'\e834'}.revicon-video:before{content:'\e805'}.revicon-arrow-combo:before{content:'\e827'}.revicon-left-open-1:before{content:'\e82a'}.revicon-right-open-1:before{content:'\e82b'}.revicon-left-open-mini:before{content:'\e822'}.revicon-right-open-mini:before{content:'\e823'}.revicon-left-open-big:before{content:'\e824'}.revicon-right-open-big:before{content:'\e825'}.revicon-left:before{content:'\e836'}.revicon-right:before{content:'\e826'}.revicon-ccw:before{content:'\e808'}.revicon-arrows-ccw:before{content:'\e806'}.revicon-palette:before{content:'\e829'}.revicon-list-add:before{content:'\e80c'}.revicon-doc:before{content:'\e809'}.revicon-left-open-outline:before{content:'\e82e'}.revicon-left-open-2:before{content:'\e82c'}.revicon-right-open-outline:before{content:'\e82f'}.revicon-right-open-2:before{content:'\e82d'}.revicon-equalizer:before{content:'\e83a'}.revicon-layers-alt:before{content:'\e804'}.revicon-popup:before{content:'\e828'}
    /* slider-captions.css */
    .tp-caption.big_white{position:absolute;color:#fff;text-shadow:none;font-weight:700;font-size:36px;line-height:36px;font-family:Arial;padding:0 4px;padding-top:1px;margin:0;border-width:0;border-style:none;background-color:#000;letter-spacing:-1.5px}.tp-caption.big_orange{position:absolute;color:#ff7302;text-shadow:none;font-weight:700;font-size:36px;line-height:36px;font-family:Arial;padding:0 4px;margin:0;border-width:0;border-style:none;background-color:#fff;letter-spacing:-1.5px}.tp-caption.big_black{position:absolute;color:#000;text-shadow:none;font-weight:700;font-size:36px;line-height:36px;font-family:Arial;padding:0 4px;margin:0;border-width:0;border-style:none;background-color:#fff;letter-spacing:-1.5px}.tp-caption.medium_grey{position:absolute;color:#fff;text-shadow:none;font-weight:700;font-size:20px;line-height:20px;font-family:Arial;padding:2px 4px;margin:0;border-width:0;border-style:none;background-color:#888;white-space:nowrap;text-shadow:0 2px 5px rgba(0,0,0,0.5)}.tp-caption.small_text{position:absolute;color:#fff;text-shadow:none;font-weight:700;font-size:14px;line-height:20px;font-family:Arial;margin:0;border-width:0;border-style:none;white-space:nowrap;text-shadow:0 2px 5px rgba(0,0,0,0.5)}.tp-caption.medium_text{position:absolute;color:#fff;text-shadow:none;font-weight:700;font-size:20px;line-height:20px;font-family:Arial;margin:0;border-width:0;border-style:none;white-space:nowrap;text-shadow:0 2px 5px rgba(0,0,0,0.5)}.tp-caption.large_text{position:absolute;color:#fff;text-shadow:none;font-weight:700;font-size:40px;line-height:40px;font-family:Arial;margin:0;border-width:0;border-style:none;white-space:nowrap;text-shadow:0 2px 5px rgba(0,0,0,0.5)}.tp-caption.very_large_text{position:absolute;color:#fff;text-shadow:none;font-weight:700;font-size:60px;line-height:60px;font-family:Arial;margin:0;border-width:0;border-style:none;white-space:nowrap;text-shadow:0 2px 5px rgba(0,0,0,0.5);letter-spacing:-2px}.tp-caption.very_big_white{position:absolute;color:#fff;text-shadow:none;font-weight:700;font-size:60px;line-height:60px;font-family:Arial;margin:0;border-width:0;border-style:none;white-space:nowrap;padding:0 4px;padding-top:1px;background-color:#000}.tp-caption.very_big_black{position:absolute;color:#000;text-shadow:none;font-weight:700;font-size:60px;line-height:60px;font-family:Arial;margin:0;border-width:0;border-style:none;white-space:nowrap;padding:0 4px;padding-top:1px;background-color:#fff}.tp-caption.boxshadow{-moz-box-shadow:0 0 20px rgba(0,0,0,0.5);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.5);box-shadow:0 0 20px rgba(0,0,0,0.5)}.tp-caption.black{color:#000;text-shadow:none}.tp-caption.noshadow{text-shadow:none}.tp-caption a{color:#ff7302;text-shadow:none;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-ms-transition:all .2s ease-out}.tp-caption a:hover{color:#ffa902}
    /* carousel */
    .rc-carusel .owl-wrapper:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.rc-carusel{display:none;position:relative;width:100%;-ms-touch-action:pan-y}.rc-carusel .owl-wrapper{display:none;position:relative;-webkit-transform:translate3d(0,0,0)}.rc-carusel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%}.rc-carusel .owl-wrapper-outer.autoHeight{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out}.rc-carusel .owl-item{float:left}.owl-controls .owl-page,.owl-controls .owl-buttons div{cursor:pointer}.owl-controls{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.grabbing{cursor:url(../images/grabbing.png) 8 8,move}.rc-carusel .owl-wrapper,.rc-carusel .owl-item{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-origin{-webkit-perspective:1200px;-webkit-perspective-origin-x:50%;-webkit-perspective-origin-y:50%;-moz-perspective:1200px;-moz-perspective-origin-x:50%;-moz-perspective-origin-y:50%;perspective:1200px}.owl-fade-out{z-index:10;-webkit-animation:fadeOut .7s both ease;-moz-animation:fadeOut .7s both ease;animation:fadeOut .7s both ease}.owl-fade-in{-webkit-animation:fadeIn .7s both ease;-moz-animation:fadeIn .7s both ease;animation:fadeIn .7s both ease}.owl-backSlide-out{-webkit-animation:backSlideOut 1s both ease;-moz-animation:backSlideOut 1s both ease;animation:backSlideOut 1s both ease}.owl-backSlide-in{-webkit-animation:backSlideIn 1s both ease;-moz-animation:backSlideIn 1s both ease;animation:backSlideIn 1s both ease}.owl-goDown-out{-webkit-animation:scaleToFade .7s ease both;-moz-animation:scaleToFade .7s ease both;animation:scaleToFade .7s ease both}.owl-goDown-in{-webkit-animation:goDown .6s ease both;-moz-animation:goDown .6s ease both;animation:goDown .6s ease both}.owl-fadeUp-in{-webkit-animation:scaleUpFrom .5s ease both;-moz-animation:scaleUpFrom .5s ease both;animation:scaleUpFrom .5s ease both}.owl-fadeUp-out{-webkit-animation:scaleUpTo .5s ease both;-moz-animation:scaleUpTo .5s ease both;animation:scaleUpTo .5s ease both}@-webkit-keyframes empty{0{opacity:1}}@-moz-keyframes empty{0{opacity:1}}@keyframes empty{0{opacity:1}}@-webkit-keyframes fadeIn{0{opacity:0}100%{opacity:1}}@-moz-keyframes fadeIn{0{opacity:0}100%{opacity:1}}@keyframes fadeIn{0{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeOut{0{opacity:1}100%{opacity:0}}@-moz-keyframes fadeOut{0{opacity:1}100%{opacity:0}}@keyframes fadeOut{0{opacity:1}100%{opacity:0}}@-webkit-keyframes backSlideOut{25%{opacity:.5;-webkit-transform:translateZ(-500px)}75%{opacity:.5;-webkit-transform:translateZ(-500px) translateX(-200%)}100%{opacity:.5;-webkit-transform:translateZ(-500px) translateX(-200%)}}@-moz-keyframes backSlideOut{25%{opacity:.5;-moz-transform:translateZ(-500px)}75%{opacity:.5;-moz-transform:translateZ(-500px) translateX(-200%)}100%{opacity:.5;-moz-transform:translateZ(-500px) translateX(-200%)}}@keyframes backSlideOut{25%{opacity:.5;transform:translateZ(-500px)}75%{opacity:.5;transform:translateZ(-500px) translateX(-200%)}100%{opacity:.5;transform:translateZ(-500px) translateX(-200%)}}@-webkit-keyframes backSlideIn{0,25%{opacity:.5;-webkit-transform:translateZ(-500px) translateX(200%)}75%{opacity:.5;-webkit-transform:translateZ(-500px)}100%{opacity:1;-webkit-transform:translateZ(0) translateX(0)}}@-moz-keyframes backSlideIn{0,25%{opacity:.5;-moz-transform:translateZ(-500px) translateX(200%)}75%{opacity:.5;-moz-transform:translateZ(-500px)}100%{opacity:1;-moz-transform:translateZ(0) translateX(0)}}@keyframes backSlideIn{0,25%{opacity:.5;transform:translateZ(-500px) translateX(200%)}75%{opacity:.5;transform:translateZ(-500px)}100%{opacity:1;transform:translateZ(0) translateX(0)}}@-webkit-keyframes scaleToFade{to{opacity:0;-webkit-transform:scale(.8)}}@-moz-keyframes scaleToFade{to{opacity:0;-moz-transform:scale(.8)}}@keyframes scaleToFade{to{opacity:0;transform:scale(.8)}}@-webkit-keyframes goDown{from{-webkit-transform:translateY(-100%)}}@-moz-keyframes goDown{from{-moz-transform:translateY(-100%)}}@keyframes goDown{from{transform:translateY(-100%)}}@-webkit-keyframes scaleUpFrom{from{opacity:0;-webkit-transform:scale(1.5)}}@-moz-keyframes scaleUpFrom{from{opacity:0;-moz-transform:scale(1.5)}}@keyframes scaleUpFrom{from{opacity:0;transform:scale(1.5)}}@-webkit-keyframes scaleUpTo{to{opacity:0;-webkit-transform:scale(1.5)}}@-moz-keyframes scaleUpTo{to{opacity:0;-moz-transform:scale(1.5)}}@keyframes scaleUpTo{to{opacity:0;transform:scale(1.5)}}
    /* jquery.akordeon.css */
    .akordeon{width:616px;border:solid 1px black;color:White;font-family:Arial;font-size:12px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;behavior:url(PIE.htc);display:none}.akordeon p,.akordeon a{color:#fff}.akordeon-item{position:relative}.akordeon-item .akordeon-item-head{height:44px;background:#4b4b4b;background-image:-webkit-gradient(linear,0 0,0 100%,from(#4b4b4b),to(#303030));background-image:-moz-linear-gradient(#4b4b4b,#303030);background-image:-webkit-linear-gradient(#4b4b4b,#303030);background-image:-o-linear-gradient(#4b4b4b,#303030);background:-ms-linear-gradient(#4b4b4b,#303030);background:linear-gradient(#4b4b4b,#303030);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4b4b4b',endColorstr='#303030',GradientType=0);padding-top:14px}.akordeon-item .akordeon-item-body{background:#424242;background-image:-webkit-gradient(linear,0 0,0 100%,from(#424242),to(#303030));background-image:-moz-linear-gradient(#424242,#303030);background-image:-webkit-linear-gradient(#424242,#303030);background-image:-o-linear-gradient(#424242,#303030);background:-ms-linear-gradient(#424242,#303030);background:linear-gradient(#424242,#303030);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#424242',endColorstr='#303030',GradientType=0);border-bottom:0;overflow:hidden}.akordeon-icon{width:34px;height:30px;background:#c9f055;background-image:-webkit-gradient(linear,0 0,0 100%,from(#c9f055),to(#95e21a));background-image:-moz-linear-gradient(#c9f055,#95e21a);background-image:-webkit-linear-gradient(#c9f055,#95e21a);background-image:-o-linear-gradient(#c9f055,#95e21a);background:-ms-linear-gradient(#c9f055,#95e21a);background:linear-gradient(#c9f055,#95e21a);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9f055',endColorstr='#95e21a',GradientType=0);border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;padding:0;margin:0;float:left;cursor:pointer;behavior:url(PIE.htc)}.akordeon-heading{float:left;padding-left:10px;padding-top:8px;font-weight:bold}.akordeon-icon span{color:#83a626;font-size:36px;position:absolute;left:6px;top:-6px;font-weight:bold;text-align:center}.akordeon-item.expanded .akordeon-icon span{top:-9px}.akordeon-item-head-container{width:100%;position:absolute;left:-8px;cursor:pointer}.akordeon-item.expanded .akordeon-item-body{border-top:solid 1px #5c5c5c}.akordeon-item.expanded .akordeon-heading{color:#c9f055}.akordeon-item.expanded .akordeon-item-head{background:#424242 !important;background-image:-webkit-gradient(linear,0 0,0 100%,from(#424242),to(#303030)) !important;background-image:-moz-linear-gradient(#424242,#303030) !important;background-image:-webkit-linear-gradient(#424242,#303030) !important;background-image:-o-linear-gradient(#424242,#303030) !important;background:-ms-linear-gradient(#424242,#303030) !important;background:linear-gradient(#424242,#303030) !important;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#424242',endColorstr='#303030',GradientType=0) !important}.akordeon-item-content{padding:10px;min-height:120px;height:auto;overflow:auto}.akordeon-border-bottom{border-bottom:solid 1px black}.akordeon-border-top{border-top:solid 1px black}.akordeon-item.expanded .akordeon-item-body.akordeon-border-bottom{border-bottom:solid 1px black !important}.akordeon-item.akordeon-item-first .akordeon-item-head{-webkit-border-top-left-radius:4px;-webkit-border-top-right-radius:4px;-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;border-top-left-radius:4px;border-top-right-radius:4px;behavior:url(PIE.htc)}.akordeon-item.akordeon-item-last.collapsed .akordeon-item-head{-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-bottomleft:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom:0;behavior:url(PIE.htc)}.akordeon-item.akordeon-item-last.expanded .akordeon-item-head{-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:solid 1px black;behavior:url(PIE.htc)}.akordeon-item.akordeon-item-last.expanded .akordeon-item-body{-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-bottomleft:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;behavior:url(PIE.htc)}
    /* Font Awesome */
    @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:normal;font-style:normal}

Examples and source code

icon-lock

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

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

icon-lock

icon-lock

icon-lock

icon-lock

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

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

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

CSS3 animations aren't supported in IE8 - IE9.

icon-lock on icon-check-empty
icon-lock on icon-circle
icon-lockl on icon-sign-blank
icon-ban-circle on icon-lock

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