Font Awesome icon usage statistics

  • 7 types of Font Awesome iconic font are used and found 7 times in total.
  • OPENXCELL.COM used 1.0 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of OPENXCELL.COM are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • OPENXCELL.COM includes "http://www.openxcell.com/wp-content/plugins/bwp-minify/min/?f=wp-content/plugins/LayerSlider/static/css/layerslider.css,wp-content/plugins/contact-form-7/includes/css/styles.css,wp-content/plugins/olevmedia-portfolio/assets/css/portfolio.css,wp-content/plugins/olevmedia-shortcodes/assets/css/shortcodes.css,wp-content/plugins/wp-biographia/css/wp-biographia.min.css,wp-content/themes/beep/style.css,wp-content/themes/beep/css/responsive-mobile.css,wp-content/themes/beep/css/font-awesome.min.css,wp-content/themes/beep/css/layerslider/skins.css,wp-content/themes/beep/css/prettyPhoto.css" to use Font Awesome and information from CSS is like below.
  • /**/ .mobile_image{display:none}::-webkit-input-placeholder{color:#000}:-moz-placeholder{color:#000}::-moz-placeholder{color:#000}:-ms-input-placeholder{color:#000}.toppest_menu
    a{font-weight:bold;font-family:Raleway;font-size:15px;color:#4d4d4d !important;text-decoration:none !important;padding:0px
    12px;box-shadow:1px 0px 0px 0px #fff;border-right:1px solid #dad9d9}.header-top{background-color:#f0f0f0}.phone_num{font-weight:bold;color:#4d4d4d !important;margin:7px
    0px !important;font-size:15px}.top_menu_item_last{border-right:0px !important;box-shadow:none !important}.top_menu_item_first{padding-left:0px !important}#menu-header-menu-openxcell .menu-item-19437
    a{background-image:url("/wp-content/uploads/2014/08/value-shore.png") !important;background-repeat:no-repeat;background-position:50%;font-size:0px !important;padding-left:111px !important;background-size:88px !important}#menu-header-menu-openxcell .menu-item-19437 a:hover{border:0px
    !important}.workhive_native_spacing{padding:5%}.wh_coming_soon{color:#fff;font-family:raleway;font-weight:300 !important;padding:9px
    0;background:linear-gradient(#3989ce, #2d7ec3) repeat scroll 0 0 rgba(0, 0, 0, 0);border:1px
    solid #2a73b2 !important;border-radius:6px !important;box-shadow:0 1px 2px -1px rgba(255, 255, 255, 1) inset;font-size:18px;cursor:pointer;width:171px !important;margin-top:22px !important}.desk_image{display:block}.mobile_image{display:none}#comments .pic-inner
    img{width:44px !important}#commentlist .comment-body
    img{width:44px !important}.newsletter-email{}.sidebar-display .content-column-sidebar aside>div{padding-left:16px;padding-right:16px;border-top:2px solid #2a7bc1;margin-bottom:30px;border-right:1px solid #bebbbb;border-left:1px solid #bebbbb;border-bottom:1px solid #bebbbb;box-shadow:0px 2px 0px 0px #d2d2d2}.sidebar-display .content-column-sidebar aside .newsletter-email{border-radius:0px !important;border:1px
    solid #ccc}.sidebar-display .content-column-sidebar aside .newsletter-submit{background-color:#21ac73;border-radius:30px;text-shadow:1px 1px 1px #555}.sidebar-widget#categories-5 ul li:before{content:""}.sidebar-widget#categories-5 ul
    li{padding-left:21px !important;background-image:url("/wp-content/uploads/2014/09/folder.png");background-repeat:no-repeat;background-position:0px 6px}.sidebar-widget#wpp-2 .wpp-list  li
    a{color:#827f7f}.sidebar-widget#wpp-2 .wpp-list  li a:hover{text-decoration:none !important}.sidebar-widget#wpp-2 .wpp-list
    li{border-bottom:1px dotted #cfcfcf;padding-bottom:8px !important}.sidebar-widget#wpp-2 .wpp-list li:last-child{border-bottom:0px !important}.sidebar-widget#wpp-3 .wpp-list  li
    a{color:#827f7f}.sidebar-widget#wpp-3 .wpp-list  li a:hover{text-decoration:none !important}.sidebar-widget#wpp-3 .wpp-list
    li{border-bottom:1px dotted #cfcfcf;padding-bottom:8px !important}.sidebar-widget#wpp-3 .wpp-list li:last-child{border-bottom:0px !important}.sidebar-display .content-column-sidebar aside  #author_avatars-2{border-bottom:0px !important;margin-bottom:0px !important}.sidebar-display .content-column-sidebar aside #text-15{border-top:0px !important}.sidebar-display .content-column-sidebar aside #sab_author_widget-2{border-bottom:0px !important;box-shadow:none !important;overflow:hidden;margin-bottom:0px !important}.author_name_display{display:none}.sidebar-display .content-column-sidebar aside #sab_author_widget-2 table tbody
    td{overflow:hidden;padding:0px
    !important}.sidebar-display .content-column-sidebar aside #sab_author_widget-2 table tbody
    .photo{display:block;margin-right:13px;margin-bottom:8px !important;width:66px !important;height:auto !important}.sidebar-display .content-column-sidebar aside  #author_avatars-3{border-bottom:0px !important;margin-bottom:0px !important}.sidebar-display .content-column-sidebar aside #text-16{border-top:0px !important}.sidebar-display .content-column-sidebar aside #sab_author_widget-3{border-bottom:0px !important;box-shadow:none !important;overflow:hidden;margin-bottom:0px !important}.sidebar-display .content-column-sidebar aside #sab_author_widget-3 table tbody
    td{overflow:hidden;padding:0px
    !important}.sidebar-display .content-column-sidebar aside #sab_author_widget-3 table tbody
    .photo{display:block;margin-right:13px;margin-bottom:8px !important;width:66px !important;height:auto !important}.wfu{text-align:center}.wfu
    a{background-color:#25ba7d;padding:9px
    46px !important;color:#fff !important;font-size:20px !important;border-radius:50px;overflow:hidden;text-shadow:1px 1px 1px #555;display:inline-block}.wfu a:hover{text-decoration:none !important}.wfu a
    img{float:left;margin-top:5px}.dl_wrapper{text-align:center;margin-top:14px}.dl_wrapper
    a{font-size:20px !important;color:#fff !important;padding:12px
    29px;background-color:#25ba7d;border-radius:30px;display:inline-block}.dl_wrapper a:hover{text-decoration:none !important}.dl_wrapper .fa-download{font-size:21px !important}.blog .blogroll .post-meta{margin-top:-68px !important}.blog .blogroll .post-content-excerpt
    p{margin-top:36px !important}.toppest_menu
    .reg_now{box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, 0.2) !important;border-color:#f06012 !important;color:rgb(255, 255, 255) !important;border-radius:2px !important;background-color:#f06012 !important;font-size:13px !important;padding:4px
    11px}.reg_now{animation:blinker 0.6s cubic-bezier(0.5, 0, 1, 1) infinite alternate}@keyframes
    blinker{from{opacity:1}to{opacity:0}}.viewall_wrapper{}.viewall_wrapper
    a{width:48%;text-align:center;font-family:raleway;font-weight:600;display:block;font-size:20px;color:#fff;padding:1%;float:left}.viewall_wrapper a:hover{text-decoration:none}.all_portfolio{background-color:#f07430}.all_testimonial{background-color:#5bfab9}.contact_footer_wrapper{overflow:hidden;clear:both}.photo{border-radius:50%}.client_portfolio  .omsc-full-width-section{padding-bottom:30px}@media only screen and (max-width: 1100px){.wp-biographia-container-none .wp-biographia-text{width:73% !important}}@media only screen and (max-width: 960px){.wp-biographia-container-none .wp-biographia-text{width:64% !important}.page-id-19077
    .input_c{margin:1.1% 1.7% !important;width:46.5% !important}.page-id-19077 .wpcf7-submit{width:100%;max-width:100%}.page-id-19077
    .btn{width:46.5%;margin:1.1% 1.7% !important}.page-id-19077 .input_c:nth-child(10){width:97% !important}}@media only screen and (min-width: 809px){.wp-biographia-container-none .wp-biographia-text h3, .wp-biographia-container-none .wp-biographia-text
    p{padding-left:15px !important}}@media only screen and (max-width: 809px){.wp-biographia-container-none .wp-biographia-text h3
    a{color:#2B7BC2 !important}.wp-biographia-container-none .wp-biographia-text{width:auto !important}.wp-biographia-container-none .wp-biographia-text
    p{margin-top:14px !important}}@media only screen and (max-width: 768px){.wp-biographia-container-none .wp-biographia-text{}.wp-biographia-container-none  .wp-biographia-pic{margin:0px
    auto !important;float:none !important}.wp-biographia-container-none .wp-biographia-text
    h3{text-align:center !important}.mobile_image{display:block}.desktop_image{display:none !important}}@media only screen and (max-width: 767px){#menu-header-menu-openxcell-1 .menu-item-19437
    a{background-position:0px !important;padding:14px
    0px !important;background-image:url("/wp-content/uploads/2014/08/value-shore.png") !important;background-size:75px !important;font-size:0px !important;background-repeat:no-repeat !important}.blog .blogroll .post-meta{margin-bottom:28px !important}.viewall_wrapper
    a{clear:both;width:100%}}@media only screen and (min-width: 650px){.contact_form{float:right;margin-left:2%;margin-bottom:2%;width:23%}.contact_inquire{}}@media only screen and (max-width: 650px){.contact_form{display:none}}@media only screen and (max-width: 600px){.desk_image{display:none !important}.mobile_image{display:block !important}}@media only screen and (max-width: 500px){.page-id-19077
    .sidebar_form{width:100%;min-height:137px !important}.page-id-19077 .sidebar_form > div, .page-id-19077 .your-message{width:100% !important;min-height:0px !important}.page-id-19077
    .input_c{margin:5px
    0px !important;padding:5px
    0px  !important}.page-id-19077 .input_c:nth-child(10){width:100% !important}.page-id-19077  .captcha-765{width:100% !important}.page-id-19077 .wpcf7-captchac{margin:0px
    auto !important;float:none !important;display:block !important}.page-id-19077 span.captcha-765{float:none !important;margin:0px
    !important}.page-id-19077 img.wpcf7-captchac{margin-top:8px !important}.page-id-19077 span.captcha-765{float:none !important}.page-id-19077
    .btn{margin:0px
    !important}.page-id-19077 .orderhive_form
    form{padding:0px
    7px}}@media only screen and (max-width: 390px){.wp-biographia-container-none .wp-biographia-pic{float:left !important}.wp-biographia-text
    h3{text-align:left !important}}.ninja-forms-field[type="Text"]{background-color:#fff !important}.demo_homepage .container-inner>h2{margin:0}.our_client .omsc-logos{margin:0}.demo_homepage .omsc-full-width-section-content{padding:0
    !important}.our_client .omsc-logos .omsc-logos-item{padding-top:20px !important;padding-bottom:20px !important}.our_client .omsc-full-width-section{border-bottom:1px solid #dedede}.page.page-id-20302
    .contact_footer_wrapper{display:none}.demo_homepage>p{margin:0}.partner .omsc-two-third.omsc-last{background-color:#fff}.partner .omsc-two-third.omsc-last>p{padding:0;margin:0;font-size:15px;color:#000}.demo_homepage .container-inner>p{display:none}.tech
    .lazyload{padding-top:0px}.client_portfolio>p{display:none}.view_button{background-color:#ffa902;border:8px
    solid #fff;border-radius:35px 38px;font-size:20px;font-weight:bold;position:relative;text-decoration:none !important;top:-32px;width:200px;margin:0
    auto;text-align:center;padding:10px}.portfolio_button
    .container{text-align:center}.portfolio_button .container-inner>br{display:none}.blog_part .omsc-recent-posts-title{padding-top:55%}.blog_part .omsc-recent-posts-thumb{position:absolute;top:0;width:100%}.blog_part .omsc-recent-posts-item.omsc-one-third{position:relative}.partner .omsc-two-third.omsc-last>h4{color:#000;font-size:26px;margin:25px
    0 5px}.center_align{display:block;margin:0
    auto}.call_us .omsc-button{height:54px;padding:13px;width:167px;background-color:#fff !important;border-radius:3px;-webkit-box-shadow:-1px 1px 4px rgba(0,0,0,.5);-moz-box-shadow:-1px 1px 4px rgba(0,0,0,.5);box-shadow:-1px 1px 4px rgba(0,0,0,.5);-webkit-border-radius:3px;-moz-border-radius:3px;font-family:raleway}.client_portfolio .omsc-full-width-section{background-color:#3f51b5}.call_us .omsc-full-width-section{background-color:#4f84b1}.our_client .omsc-full-width-section{background-color:#f6f6f6}.ompf-portfolio.ompf-sc-portfolio .ompf-portfolio-thumb{-webkit-box-shadow:-1px 1px 4px rgba(0,0,0,.37);-moz-box-shadow:-1px 1px 4px rgba(0,0,0,.37);box-shadow:-1px 1px 4px rgba(0,0,0,.37)}.partner .container-inner{padding-bottom:15px !important}.partner .container-inner>br{display:none}.blog_part .container-inner>br{display:none}.contact{background-color:#fff !important;border-radius:3px;box-shadow:-1px 1px 4px rgba(0, 0, 0, 0.5);color:#000 !important;font-family:raleway;font-size:18px;padding:15px
    38px;text-decoration:none !important}.blog_part{margin-bottom:-61px}.callus_inner{padding-bottom:13px}.call_us
    .contact{margin-top:20px;display:inline-block}.wp-biographia-links{display:none}.career_and_culture .omsc-two-third>h3{font-size:24.99px;margin-bottom:0}.career_and_culture .omsc-two-third>p{font-size:14.99px;margin-top:6px;color:#2B2B2B}.career_and_culture>br{display:none}.post-2663 .omsc-one-fourth
    img{width:auto}#menu-item-19437>a{display:none}.toppest_menu a:last-child{background-image:url("/wp-content/uploads/2014/08/value-shore.png");background-position:9px center;background-repeat:no-repeat;color:transparent !important}.mobile-backend .omsc-full-width-section-inner{padding-top:60px;padding-bottom:24px}.mobile-backend .omsc-two-third.omsc-last>h3{font-size:26px;text-transform:uppercase;color:#585858}.owsome_part .omsc-full-width-section-inner{background-color:#2B242B;padding-top:50px}.owsome_part .container-inner>h3{color:#fff;font-size:26px;margin-top:0;text-align:center;text-transform:uppercase}.owsome_part .container-inner>h4{font-size:18px;text-align:center;margin:0
    auto;color:#797579;padding-bottom:50px}.owsome_part .omsc-one-third{text-align:center}.owsome_part .container-inner>br{display:none}.owsome_part .omsc-one-third>p{color:#fff;font-size:18px}.owsome_part .container-inner{padding-bottom:50px}#layerslider_9 .ls-bottom-nav-wrapper{display:none}#layerslider_9 .ls-nav-prev{opacity:0.55}#layerslider_9 .ls-nav-next{opacity:0.55}.remote_app_slider .container-inner{margin:0}.crunch_part .omsc-full-width-section-inner{margin-bottom:80px}@media only screen and (max-width: 767px){body{min-width:320px}.one-half,.one-third,.two-third,.one-fourth,.three-fourth,.one-fifth,.two-fifth,.three-fifth,.four-fifth,.one-sixth,.five-sixth{float:none;margin:1em
    0;width:auto}.header-intro-text,.header-socials,.header-wpml-selector{float:none;margin:1em
    0;text-align:center}.header-socials [class^="social-icon"],
    .header-socials [class*=" social-icon"]{margin-left:0.2em;margin-right:0.2em}.logo-menu-wrapper{display:block}.logo-menu-wrapper .logo-box,.logo-box{display:block;text-align:center;margin:0
    auto;padding-right:0;width:auto}.header-secondary-menu,
    .logo-menu-wrapper .menu-box,.header-menu,.header-mid.logo-type-none{display:none}.header-mobile-menu,.mobile-header-menu-wrapper{display:block}.with-sub-footer-text .sub-footer-menu-social,
    .with-sub-footer-text .sub-footer-text{float:none;text-align:center;margin:1em
    0;width:auto}.sidebar-display .content-column-sidebar,
    .sidebar-display .content-column-content{float:none;width:auto}.sidebar-display .content-column-sidebar{margin-top:2em}#commentform .one-third{width:auto;float:none;margin-right:0}.blogroll.layout-small .post-media,
    .blogroll.layout-medium .post-media{margin:1em
    auto;float:none;width:auto}.blogroll.layout-small .post-media{max-width:348px}.blogroll.layout-medium .post-media{max-width:557px}.custom-gallery .item-caption,
    .gallery-sliced .item-caption,
    .gallery-masonry .item-caption{font-size:85%;padding:0.1em 0.3em;line-height:1.3}.gallery-sliced .img-box,
    .gallery-masonry
    .item{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.gallery-masonry
    .item{width:48.8%}.menu-sticky-node.menu-stuck,
    .admin-bar .menu-sticky-node.menu-stuck{position:relative;z-index:auto;top:0}.menu-position-top_fixed .menu-sticky-node .container-wrapper:before{display:none}}@media only screen and (max-width: 380px){.gallery-sliced .img-box.img-1,
    .gallery-sliced .img-box.img-2,
    .gallery-sliced .img-box.img-3,
    .gallery-sliced .img-box.img-4,
    .gallery-sliced .img-box.img-5{float:none;width:auto;margin-right:0;height:auto !important;margin-bottom:0.5em}.gallery-masonry
    .items{margin:0}.gallery-masonry
    .item{float:none;width:auto;margin-right:0;margin-bottom:0.5em}.blogroll.layout-grid
    section{margin:0}.blogroll.layout-grid
    .post{width:auto;margin-right:0;float:none}.gallery{margin:1em
    0}.gallery .gallery-item{float:none;width:auto !important;margin:1em
    0;text-align:center}.gallery .gallery-item
    img{width:auto}}/*!
     *  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-wrench

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

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

fa-wrench

fa-wrench

fa-wrench

fa-wrench

fa-wrench

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-wrench fa-lg"></i> fa-wrench</p>
<p><i class="fa fa-wrench fa-2x"></i> fa-wrench</p>
<p><i class="fa fa-wrench fa-3x"></i> fa-wrench</p>
<p><i class="fa fa-wrench fa-4x"></i> fa-wrench</p>
<p><i class="fa fa-wrench fa-5x"></i> fa-wrench</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-wrench fa-fw"></i> Home</a></li>
  <li><a href="#"><i class="fa fa-wrench 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-wrench"></i>Font Awesome icon can be used</li>
  <li><i class="fa-li fa fa-wrench 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-wrench 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-wrench"></i>  normal<br>
<i class="fa fa-wrench fa-rotate-90"></i>  fa-rotate-90<br>
<i class="fa fa-wrench fa-rotate-180"></i>  fa-rotate-180<br>
<i class="fa fa-wrench fa-rotate-270"></i>  fa-rotate-270<br>
<i class="fa fa-wrench fa-flip-horizontal"></i>  fa-flip-horizontal<br>
<i class="fa fa-wrench 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-wrench fa-2x fa-spin"></i>
<i class="fa fa-wrench fa-3x fa-spin"></i>
<i class="fa fa-wrench fa-4x fa-spin"></i>

CSS3 animations aren't supported in IE8 - IE9.

fa-wrench on fa-square-o
fa-wrench on fa-circle
fa-wrenchl on fa-square
fa-ban on fa-wrench

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-wrench fa-stack-1x"></i>
</span>
fa-wrench on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-wrench fa-stack-1x fa-inverse"></i>
</span>
fa-wrench on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-wrench fa-stack-1x fa-inverse"></i>
</span>
fa-wrench on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-wrench fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-wrench

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

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

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



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