Font Awesome icon usage statistics

  • 0 types of Font Awesome iconic font are used and found 0 times in total.
  • IROPRINT.COM used 0 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of IROPRINT.COM are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • IROPRINT.COM includes "http://www.iroprint.com/templates/ts_ybiz/css-compiled/master-1285871822d22df002471ad8cd828180.css" to use Font Awesome and information from CSS is like below.
  • @font-face{font-family:'pt_sansregular';src:url('../fonts/PT_Sans/pt_sans-web-regular-webfont.eot');src:url('../fonts/PT_Sans/pt_sans-web-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/PT_Sans/pt_sans-web-regular-webfont.woff') format('woff'), url('../fonts/PT_Sans/pt_sans-web-regular-webfont.ttf') format('truetype'), url('../fonts/PT_Sans/pt_sans-web-regular-webfont.svg#pt_sansregular') format('svg');font-weight:normal;font-style:normal;}@font-face{font-family:'YanoneKaffeesatzLight';src:url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Light-webfont.eot');src:url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Light-webfont.woff') format('woff'), url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Light-webfont.ttf') format('truetype'), url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Light-webfont.svg#YanoneKaffeesatzLight') format('svg');font-weight:normal;font-style:normal;}.ts-main{background:#f7f7f7;margin-top:25px;box-shadow:0 0 6px rgba(0,0,0,0.3);}body{font-family:pt_sansregular;padding-bottom:30px;}h1,h2,h3,h4{font-family:YanoneKaffeesatzLight;font-weight:400;}a{-webkit-transition:color 0.2s ease-out;-moz-transition:color 0.2s ease-out;-o-transition:color 0.2s ease-out;transition:color 0.2s ease-out;}#rt-transition.rt-hidden{opacity:0;}#rt-transition.rt-visible{opacity:1;-webkit-transition:opacity 0.4s ease-in;-moz-transition:opacity 0.4s ease-in;-o-transition:opacity 0.4s ease-in;transition:opacity 0.4s ease-in;}.logo-block{padding:0 15px;margin:15px 10px;}#rt-logo{margin:0;width:400px;height:105px;display:block;}#rt-top-surround{position:relative;}#rt-header,#rt-top{z-index:2;position:relative;}.menu-block{padding:0;margin:0;float:right;}.rt-menu-mobile{text-align:center;padding:0 0 15px 0;}#rt-maintop{padding-top:20px;}.title,.component-content h2{font-weight:normal;letter-spacing:normal;margin-top:0;padding-bottom:10px;margin-bottom:10px;}#rt-top-surround .title,#rt-showcase .title{border:none;box-shadow:none;}.title1 .title{margin:-11px -16px 20px -16px;padding:10px 15px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.title2 .title{margin:-10px -15px 20px -15px;padding:10px 15px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.title3 .title{margin:-10px -15px 20px -15px;padding:10px 15px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.box1,.box2,.box3{border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.box1 .module-surround{margin:-1px;}ul.menu{list-style:none;margin:0;padding:0;}ul.menu ul{list-style:none;}ul.menu li{margin-bottom:8px;}ul.menu li a,ul.menu li .item,ul.menu li .separator{display:block;font-size:1.1em;}ul.menu li a:before,ul.menu li .item:before,ul.menu li .separator:before{content:"\f105";font-family:FontAwesome;margin-right:10px;display:inline;font-size:14px;font-weight:normal;}ul.menu li.active a{color:#444;}ul.menu li.active.current > a:before,ul.menu li.active.current > .item:before,ul.menu li.active.current > .separator:before,ul.menu li#current.active > a:before,ul.menu li#current.active > .item:before,ul.menu li#current.active > .separator:before{content:"\f054";font-size:1em;margin-right:11px;}ul.menu ul.small{font-size:14px;}.gantry-example{position:relative;margin:15px 0;padding:39px 19px 14px;*padding-top:19px;background-color:#ffffff;border:1px solid #dddddd;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.gantry-example .table,.gantry-example .well,.gantry-example blockquote{margin-bottom:5px;}.gantry-example .lead{font-size:18px;line-height:24px;}.gantry-example > p:last-child{margin-bottom:0;}.gantry-example + .prettyprint{margin-top:-20px;padding-top:15px;}.gantry-example:after{content:"Example";position:absolute;top:-1px;left:-1px;padding:3px 7px;font-size:12px;font-weight:bold;background-color:#f5f5f5;border:1px solid #dddddd;color:#9da0a4;border-radius:4px 0 4px 0;-webkit-border-radius:4px 0 4px 0;-moz-border-radius:4px 0 4px 0;border-radius:4px 0 4px 0;font-style:normal;}form.gantry-example{padding-bottom:19px;}.gantry-img img,img.gantry-img{max-width:100%;height:auto;}.powered-by{display:block;width:120px;height:32px;margin:0 auto;opacity:0.8;-webkit-transition:opacity 0.2s ease-in;-moz-transition:opacity 0.2s ease-in;-o-transition:opacity 0.2s ease-in;transition:opacity 0.2s ease-in;}.powered-by:hover{opacity:1;}#gantry-totop{display:inline-block;padding:6px 30px 3px 10px;position:relative;font-weight:100;font-size:14px;float:right;}#gantry-totop:before{content:'^';position:absolute;border-radius:100%;right:5px;top:6px;width:20px;height:20px;text-align:center;line-height:28px;background:#94241e;}#rt-accessibility .rt-desc{float:left;margin-right:8px;font-weight:bold;}#rt-accessibility #rt-buttons .button{line-height:1em;padding:0;width:14px;height:14px;text-align:center;}#rt-accessibility #rt-buttons .small{font-size:inherit;}#rt-accessibility #rt-buttons .small .button:after{content:'-';}#rt-accessibility #rt-buttons .large .button:after{content:'+';}#rt-sidebar-a h2.title{text-transform:uppercase;}.title1 .title{background:#ffffff;border:1px solid #d5d5d5;}.title2 .title{color:#303030;background:#eeeeee url(../images/patterns/noise.png);-webkit-box-shadow:inset 0 2px 12px rgba(0,0,0,0.13);-moz-box-shadow:inset 0 2px 12px rgba(0,0,0,0.13);box-shadow:inset 0 2px 12px rgba(0,0,0,0.13);}.title4 .title{color:#6e6e6e;}.box1{background:#ffffff;border:1px solid #d5d5d5;}.box2{color:#303030;background:#eeeeee url(../images/patterns/noise.png);-webkit-box-shadow:inset 0 2px 12px rgba(0,0,0,0.13);-moz-box-shadow:inset 0 2px 12px rgba(0,0,0,0.13);box-shadow:inset 0 2px 12px rgba(0,0,0,0.13);}#rt-showcase .box1,#rt-showcase .box2,#rt-top-surround .box1,#rt-top-surround .box2{color:#6e6e6e;text-shadow:1px 1px 0 #ffffff;}#rt-showcase .box1 .title,#rt-showcase .box2 .title,#rt-top-surround .box1 .title,#rt-top-surround .box2 .title{color:#303030;text-shadow:1px 1px 0 #ffffff;border-bottom:1px solid #d1d1d1;-webkit-box-shadow:0 1px 0 #ffffff;-moz-box-shadow:0 1px 0 #ffffff;box-shadow:0 1px 0 #ffffff;}#rt-showcase .title1 .title,#rt-top-surround .title1 .title{color:#303030;text-shadow:1px 1px 0 #ffffff;border:1px solid #d5d5d5;}#rt-showcase .title2 .title,#rt-top-surround .title2 .title{color:#303030;text-shadow:1px 1px 0 #ffffff;-webkit-box-shadow:inset 0 2px 12px rgba(0,0,0,0.13);-moz-box-shadow:inset 0 2px 12px rgba(0,0,0,0.13);box-shadow:inset 0 2px 12px rgba(0,0,0,0.13);}ul.menu li.active.current > a,ul.menu li.active.current > .item,ul.menu li.active.current > .separator,ul.menu li#current.active > a,ul.menu li#current.active > .item,ul.menu li#current.active > .separator{color:#303030;}.powered-by{background:url(../images/logo/powered.png);}.blog .pagination{margin-left:0;}.pagenav li{background:#f0f0f0;border:1px solid #d5d5d5;box-shadow:inset 0 0 0 1px #ffffff, 0 1px 2px rgba(0,0,0,0.2);}.login-fields #username,.login-fields #password,#contact-form dd input,#contact-form dd textarea,#modlgn-username,#modlgn-passwd,#jform_email,#member-registration dd input,#search-searchword,.finder .inputbox,.inputbox{border:1px solid #d9d9d9;}.component-content .contact .title{background-color:#f1f1f1;background-image:-moz-linear-gradient(top,#ffffff,#dddddd);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#dddddd));background-image:-webkit-linear-gradient(top,#ffffff,#dddddd);background-image:-o-linear-gradient(top,#ffffff,#dddddd);background-image:linear-gradient(to bottom,#ffffff,#dddddd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffdddddd', GradientType=0);border:1px solid #d5d5d5;text-shadow:0 1px 1px rgba(255,255,255,0.75);}.pagination ul li a{background-color:#f1f1f1;background-image:-moz-linear-gradient(top,#ffffff,#dddddd);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#dddddd));background-image:-webkit-linear-gradient(top,#ffffff,#dddddd);background-image:-o-linear-gradient(top,#ffffff,#dddddd);background-image:linear-gradient(to bottom,#ffffff,#dddddd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffdddddd', GradientType=0);border:1px solid #d5d5d5;text-shadow:0 1px 1px rgba(255,255,255,0.75);}.pagination ul li span{background:#eaeaea;border:1px solid #d5d5d5;color:#aaaaaa;}.breadcrumbs a:after,.breadcrumb a:after{color:#aaaaaa;}.breadcrumbs .showHere,.breadcrumb .showHere{font-weight:bold;margin-right:5px;}.article-info dd:before{text-shadow:1px 1px 0 #ffffff;}#gantry-totop{background:#be2e26;color:#fff;}.tip-wrap{background:#ffffff;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.3);-moz-box-shadow:0 0 5px rgba(0,0,0,0.3);box-shadow:0 0 5px rgba(0,0,0,0.3);color:#6e6e6e;}.system-unpublished .system-unpublished{background:#ffffff;border-color:#d5d5d5;}abbr[title]{border-bottom:1px dotted #d5d5d5;}blockquote{border-left:5px solid #d5d5d5;}blockquote small{color:#aaaaaa;}blockquote.pull-right{border-right:5px solid #d5d5d5;}legend{color:#303030;border-bottom:1px solid #d5d5d5;}legend small{color:#d5d5d5;}.contact-form input[type="text"],.contact-form input[type="email"]{min-height:40px;}.contact-form .control-label{text-align:left;}select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{color:#6e6e6e;}textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{background-color:#fff;border:1px solid #e5e5e5;box-shadow:none;min-height:30px;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}select{border:1px solid #d5d5d5;}.offline input[type="text"],.offline input[type="password"]{padding:0 5px;}.uneditable-input,.uneditable-textarea{color:#aaaaaa;background-color:#f5f5f5;border-color:#d5d5d5;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{border-color:#d5d5d5;}.input-prepend .add-on,.input-append .add-on{text-shadow:0 1px 0 #ffffff;background-color:#be2e26;color:#fff;padding:4px 8px;border:1px solid #94241e;height:30px;line-height:30px;border-radius:0 !important;-webkit-border-radius:0 !important;-moz-border-radius:0 !important;border-radius:0 !important;}.form-actions{background-color:#f0f0f0;border-top:1px solid #d5d5d5;}.uneditable-input{background-color:;border-color:#eeeeee;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);box-shadow:inset 0 1px 2px rgba(0,0,0,0.025);}.help-block,.help-inline{color:;}.well,.table-bordered th{background-color:#f0f0f0;}.nav-tabs.nav-stacked > li > a{background-color:#f0f0f0;}.nav-tabs.nav-stacked > li > a:hover{background-color:#eaeaea;}.list-striped li:nth-child(odd),.list-striped dd:nth-child(odd),.row-striped .row:nth-child(odd),.row-striped .row-fluid:nth-child(odd),.cat-list-row0{background-color:#eaeaea;}.list-striped li:hover,.list-striped dd:hover,.row-striped .row:hover,.row-striped .row-fluid:hover,.cat-list-row0:hover,.cat-list-row1:hover{background-color:#fcfcfc;}p.success,p.info,p.error,p.warning{border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;padding:15px;font-weight:bold;border:1px solid;}p.success a,p.info a,p.error a,p.warning a{color:#666 !important;}p.success a:hover,p.info a:hover,p.error a:hover,p.warning a:hover{color:#000 !important;text-shadow:none;}p.success{background:#dff0d8;border-color:#d6e9c6;color:#468847;}p.info{background:#d9edf7;border-color:#bce8f1;color:#3a87ad;}p.error{background:#f2dede;border-color:#eed3d7;color:#b94a48;}p.warning{background:#fcf8e3;border-color:#fbeed5;color:#c09853;}@font-face{font-family:'FontAwesome';src:url('../../../libraries/gantry/assets/jui/fonts/fontawesome-webfont.eot?v=3.2.1');src:url('../../../libraries/gantry/assets/jui/fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../../../libraries/gantry/assets/jui/fonts/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../../../libraries/gantry/assets/jui/fonts/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../../../libraries/gantry/assets/jui/fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');font-weight:normal;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