Font Awesome icon usage statistics

  • 15 types of Font Awesome iconic font are used and found 21 times in total.
  • TEXNITES24.GR used 1.4 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of TEXNITES24.GR are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • TEXNITES24.GR includes "http://texnites24.gr/wp-content/plugins/bwp-minify/cache/minify-b1-fblb-css-37bef6375b75aa3e96815ac5a1a373b0.css?ver=1432390286" to use Font Awesome and information from CSS is like below.
  • /**/.wrps{text-align:center}@media only screen and (max-width: 800px){.wrps{padding-left:30px;padding-right:30px;text-align:center}#big-search{width:220px}.my_placeholder_4_suggest{width:340px}#content{width:59%;float:left}#footer-widget-area .widget-area{width:50%}#left-sidebar{width:38.5%;float:left}#right-sidebar{width:38.5%;float:left}.details_holder{width:100%}.title_holder{width:82%}#project-home-page-main-inner{display:none !important}.bx-wrapper{width:100%}.main-pg-title{width:100%;margin:auto;text-align:center}.mm_inn,.my_box3_breadcrumb{padding:0
    10px 0 10px;text-align:center}.search-ttl-form{width:100%;margin:auto;margin-bottom:20px;text-align:center}.search-ttl-form
    form{margin:auto;display:inline-block}.page_heading_me_inner{width:100%}.main_area_homepg,.buttons_box_main{width:100%}.main_tagLine{font-size:24px}.sub_tagLine{width:100%;font-size:18px}.search_box_main{width:100%}#findService{width:450px}}@media only screen and (max-width: 500px){#big-search{width:150px}.my_placeholder_4_suggest{width:300px}.main_menu_menu ul
    li{width:100%}.main_menu_menu ul li
    a{width:100%;border:0;text-align:center}.main_menu_menu ul li a:link, .main_menu_menu ul li a:visited{padding-left:0;padding-right:0}#left-sidebar{width:100%;float:left}#right-sidebar{width:100%;float:left}#content{width:100%;float:left}#footer-widget-area .widget-area{width:100%}#header
    #logo{padding:0;margin:auto;margin-bottom:10px;float:none !important}.my-logo{text-align:center}.project-page-details-holder{width:100%;margin:auto;margin-top:10px}.project-details{width:100%}.project-details li
    p{width:50%}.project-details li
    h3{width:36%}#main_pics_total{width:92%}.prj-page-image-holder{width:100%}#right-sidebar{width:100%;float:left}.wrapper{width:100% }#main{border:0}#findService{width:300px}.top-links{width:100%}.do_input{width:95%;padding:15px;overflow:visible;outline:none;border:1px
    solid #ddd;border-radius:1px;background:#fff;font-size:16px;background:#f2f2f2;font-family:Arial,Helvetica,sans-serif;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}.login-submit-form p
    label{width:100%;font-size:16px}#logins{margin-left:0;padding-left:0}#footer-widget-area div ul
    li{padding:8px}}@media only screen and (max-width: 365px){.project-details li
    p{width:70%}.project-details li
    h3{width:96%}#findService{width:250px}}@media only screen and (min-width: 940px) and (max-width: 970px){.main-pg-title{width:640px;padding-left:10px}}@media only screen and (max-width: 780px){.stretch-area{width:100%}}@media only screen and (width: 568px){.my_category_image_holder{width:47%}.post-main-details ul
    li{width:100%;margin-bottom:3px;border:0;padding-bottom:2px;border-bottom:1px solid #f2f2f2}.fun-time{padding-top:0;width:240px;float:left}}@media only screen and (min-width: 850px) and (max-width: 940px){.main-pg-title{width:500px;padding-left:10px}}@media only screen and (min-width: 801px) and (max-width: 849px){.main-pg-title{width:470px;padding-left:10px}}@media only screen and (max-width: 499px){#browse-by-location-2 #location-stuff li>ul{width:50% !important	}}@media only screen and (max-width: 365px){.regular_ul li a:link, .regular_ul li a:visited{padding:9px}a.go_back_btn:link,a.go_back_btn:visited{font-size:11px}.regular_ul{width:100%}.regular_ul
    li{width:50%;text-align:center;margin:0}.main_tagLine{line-height:24px;margin-bottom:20px}.sub_tagLine{line-height:20px;font-size:14px}.wrps{padding-left:20px;padding-right:20px;text-align:center}.browse-by-category-thumbs .widget-title{line-height:30px;font-size:20px}.my_category_image_holder{margin:auto;text-align:center;margin-bottom:20px}.browse-by-category-thumbs{text-align:center}#site-info-left, #site-info-left h3,#site-info-right{width:100%;text-align:center;margin-bottom:6px}#footer-widget-area div ul li .widget-title{text-align:center}#steps
    ul{padding:0;margin:0}#steps ul
    li{margin:0;margin-left:3px;padding:5px;float:left}.sonita2{width:96%}}@media only screen and (min-width: 501px) and (max-width: 710px){a.post_bid_btn_new:link,a.post_bid_btn_new:visited{padding:6px
    10px;font-size:12px}}@media only screen and (min-width: 590px) and (max-width: 710px){.project-details li
    p{width:146px}}@media only screen and (min-width: 501px) and (max-width: 589px){.project-details li
    p{width:120px}.project-details li
    h3{width:100px}}@media only screen and (width: 640px){#map{width:340px !important}}@media only screen and (width: 360px){.project-details li
    p{width:175px}#map{width:325px !important}.project-details li
    h3{width:100px}}@media only screen and (width: 768px){.stuffa{width:33%}#steps ul
    li{margin:0;margin-left:13px;padding:12px;float:left;margin-top:-10px}.sonita2{width:93%}.blg_pst
    .image_holder{width:15% !important}.blg_pst
    .title_holder{width:80% !important}}@media only screen and (width: 320px){.my_category_image_holder{margin-left:45px !important}.fun-time{padding-top:0;width:240px;float:left}.post-main-details ul
    li{width:100%;margin-bottom:3px;border:0;padding-bottom:2px;border-bottom:1px solid #f2f2f2}}@media only screen and (width: 480px){.my_category_image_holder{margin:3px}.stuffa{width:50%}#steps ul
    li{margin:0;margin-left:13px;padding:12px;float:left;margin-top:-10px}.sonita2{width:93%}.blg_pst
    .image_holder{width:15% !important}.blg_pst
    .title_holder{width:80% !important}}@media only screen and (min-width: 560px) and (max-width: 668px){#steps ul
    li{margin:0;margin-left:13px;padding:12px;float:left;margin-top:-10px}.sonita2{width:93%}}@media only screen and (max-width: 670px){.stuffa{width:50%}}@media only screen and (max-width: 400px){.stuffa{width:100%}}@media only screen and (width: 375px){.my_category_image_holder{margin-left:65px !important}}.main_tagLine{(;-webkit-transform:translateZ(0);;)}.sub_tagLine{[;-webkit-transform:translateZ(0);;]}@media screen and (width: 320px){.project-details li
    p{width:140px}.project-details li
    h3{width:95px}#map{width:95% !important}.blg_pst
    .image_holder{width:20% !important}.blg_pst
    .title_holder{width:75% !important}}@media screen and (max-width: 620px){.mm_inn,.my_box3_breadcrumb{padding:0;width:95%}.title_holder{width:100% !important}}.bx-next{position:absolute;top:40%;right:-25px;z-index:100;width:30px;height:30px;text-indent:-999999px;background:url(/wp-content/themes/ProjectTheme/css/images/gray_next.png) no-repeat 0 -30px}.bx-wrapper{width:900px}.bx-prev{position:absolute;top:40%;left:-29px;z-index:999;width:30px;height:30px;text-indent:-999999px;background:url(/wp-content/themes/ProjectTheme/css/images/gray_prev.png) no-repeat 0 -30px}.bx-pager
    a{margin-right:5px;color:#fff;padding:3px
    8px 3px 6px;font-size:12px;zoom:1;background:url(/wp-content/themes/ProjectTheme/css/images/gray_pager.png) no-repeat 0 -20px}.bx-auto
    .start{background:url(/wp-content/themes/ProjectTheme/css/images/gray_auto.png) no-repeat 0 2px;padding-left:13px}.bx-auto
    .stop{background:url(/wp-content/themes/ProjectTheme/css/images/gray_auto.png) no-repeat 0 -14px;padding-left:13px}.bx-next:hover,.bx-prev:hover{background-position:0 0}.bx-pager .pager-active,
    .bx-pager a:hover{background-position:0 0}.bx-pager{text-align:center;padding-top:7px;font-size:12px;color:#666}.bx-captions{text-align:center;font-size:12px;padding:7px
    0;color:#666}.bx-auto{text-align:center;padding-top:15px}.bx-auto
    a{color:#666;font-size:12px}
    /*!
     *  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
     *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
     */

Examples and source code

fa-times

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

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

fa-times

fa-times

fa-times

fa-times

fa-times

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.

<p><i class="fa fa-times fa-lg"></i> fa-times</p>
<p><i class="fa fa-times fa-2x"></i> fa-times</p>
<p><i class="fa fa-times fa-3x"></i> fa-times</p>
<p><i class="fa fa-times fa-4x"></i> fa-times</p>
<p><i class="fa fa-times fa-5x"></i> fa-times</p>
If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Use fa-fw to set icons at a fixed width. Great to use when variable icon widths throw off alignment. Especially useful in things like nav lists.

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#"><i class="fa fa-times fa-fw"></i> Home</a></li>
  <li><a href="#"><i class="fa fa-times fa-fw"></i> Library</a></li>
</ul>
  • Font Awesome icon can be used
  • to easily replace lists

Use fa-ul and fa-li to easily replace default bullets in unordered lists.

<ul class="fa-ul">
  <li><i class="fa-li fa fa-times"></i>Font Awesome icon can be used</li>
  <li><i class="fa-li fa fa-times fa-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 fa-border and pull-right or pull-left for easy pull quotes or article graphics.

<i class="fa fa-times fa-2x pull-left fa-border"></i>
Use a few styles together and you'll have easy pull quotes or a great introductory article icon.

  normal
  fa-rotate-90
  fa-rotate-180
  fa-rotate-270
  fa-flip-horizontal
  fa-flip-vertical

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.

<i class="fa fa-times"></i>  normal<br>
<i class="fa fa-times fa-rotate-90"></i>  fa-rotate-90<br>
<i class="fa fa-times fa-rotate-180"></i>  fa-rotate-180<br>
<i class="fa fa-times fa-rotate-270"></i>  fa-rotate-270<br>
<i class="fa fa-times fa-flip-horizontal"></i>  fa-flip-horizontal<br>
<i class="fa fa-times fa-flip-vertical"></i>  fa-flip-vertical

Use the fa-spin class to get any icon to rotate. Works well with fa-spinner, fa-refresh, and fa-cog.

<i class="fa fa-times fa-2x fa-spin"></i>
<i class="fa fa-times fa-3x fa-spin"></i>
<i class="fa fa-times fa-4x fa-spin"></i>

CSS3 animations aren't supported in IE8 - IE9.

fa-times on fa-square-o
fa-times on fa-circle
fa-timesl on fa-square
fa-ban on fa-times

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse 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="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-times fa-stack-1x"></i>
</span>
fa-times on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-times fa-stack-1x fa-inverse"></i>
</span>
fa-times on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-times fa-stack-1x fa-inverse"></i>
</span>
fa-times on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-times fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-times

Font Awesome works great with the full range of Bootstrap components.

<a class="btn btn-danger" href="#">
  <i class="fa fa-times fa-lg"></i> fa-times</a>
<a class="btn btn-default btn-sm" href="#">
  <i class="fa fa-times"></i> fa-times</a>

<a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-times fa-2x pull-left"></i> Font Awesome<br>fa-times



<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-times fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="fa-times">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-times fa-fw"></i></span>
  <input class="form-control" type="password" placeholder="fa-times">
</div>