Font Awesome icon usage statistics

  • 11 types of Font Awesome iconic font are used and found 22 times in total.
  • TECHNIC3D.COM used 2.0 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of TECHNIC3D.COM are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • TECHNIC3D.COM includes "http://www.technic3d.com/css/combined.min.css" to use Font Awesome and information from CSS is like below.
  • /**/body div.wrap>header nav ul li:hover>a{background-image:url("../images/style/nav_mouseover_bg.png")\9}div.wrap>header .search input{position:absolute;right:0;top:5px;color:#333;padding-right:22px;padding-left:3px;height:22px;border:1px solid transparent;background:#78a4d7;font-size:10pt;width:175px;border:1px solid #78a4d7;background:#ededed}div.wrap>header .search button{color:white;position:absolute;right:8px;top:6px;height:20px;line-height:20px;margin:0;padding:0;background:transparent;border-width:0;-webkit-text-shadow:1px 1px 2px #333;-moz-text-shadow:1px 1px 2px #333;text-shadow:1px 1px 2px #333}div.wrap>header .search{color:white;position:relative;height:36px;text-align:center;line-height:32px;right:8px}div.wrap>header .subnav{background:radial-gradient(ellipse at top,#a8bdd4 -10%,#6388b2 80%);background-color:#6388b2;width:486px;height:150px;z-index:2;position:absolute;right:0;top:36px;padding:8px;padding-right:0;overflow:hidden;border-bottom:solid 1px #6f6f6f;border-top:solid 1px #6f6f6f;display:none;white-space:nowrap}div.wrap>header .subnav3x{width:729px}div.wrap>header .subnavBox,div.wrap>header .imgButton{overflow:hidden;padding:4px;background:#ededed;width:227px;height:142px;float:left;margin-right:8px;display:inline}div.wrap>header .imgButton{padding:0;height:150px;width:235px}div.wrap>header .subnavBox:nth-of-type(2){float:right}div.wrap>header .subnavBox span{font-size:9pt;margin:4px 8px;display:block}div.wrap>header .subnavBox div.avatar img{max-width:60px;max-height:64px;vertical-align:middle}div.wrap>header .subnavBox div.avatar{width:70px;height:70px;float:left;text-align:center;line-height:70px;padding-right:4px}div.wrap>header .subnavBox div.profileLinks{clear:both}div.wrap>header .subnavBox a.nav,div.wrap>header .subnavBox a.navn{color:#333;text-decoration:none;padding:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;display:table-cell}div.wrap>header .subnavBox a.navn{padding:0;display:block}div.wrap>header .subnavBox a.nav:hover,div.wrap>header .subnavBox a.navn:hover{text-decoration:underline}div.wrap>header .subnavBox select{margin-left:8px}div.wrap>header .subnavBox input{display:block;width:90%;margin:5px 8px}div.wrap>header .subnavBox div{display:block;height:26px;line-height:20px;margin:2px 0;margin-left:5px;font-weight:bold;color:#333;text-decoration:none;font-size:8pt}.articleTitle{height:227px;background:#000;position:relative;overflow:hidden;border-bottom:1px solid #ededed}.articleTitle>img,.articleTitle>canvas,.articleTitle div.topArt>img,.articleTitle div.topArt>canvas{z-index:0;margin:auto;position:absolute;min-height:227px;min-width:980px}.articleTitle div.topArt{width:980px;float:left;display:inline;cursor:pointer}.articleTitle div.sliderwrap{height:200%;white-space:normal;position:relative;left:0}.articleTitle .headline{background-image:url("../images/style/title_bar.png");padding-top:70px;width:930px;height:157px;padding-left:50px;color:white;text-shadow:0 0 12px #000;z-index:1;position:relative;display:table-cell;vertical-align:middle;background-color:rgba(0,0,0,0.125)}.articleTitle .headline h2,.articleTitle .headline h1{font-size:25pt;font-weight:normal;margin:0}.articleTitle .headline h2.smallFont,.articleTitle .headline h1.smallFont{font-size:20pt;font-weight:normal}.articleTitle .headline h3,.articleTitle .headline span{font-size:18pt;font-weight:normal;display:block;line-height:45px}.articleTitle .headline>span,.articleTitle .headline>a{margin:-60px 0 0;display:block}.imgBar{height:150px;padding:8px 8px 11px 8px;background:url('../images/style/shadow_bottom.png') no-repeat bottom;background-color:#fff;overflow:hidden;width:964px;margin-bottom:10px}.imgButton{overflow:hidden;position:relative}.imgBar div.topArt img,.imgBarSmall div img,.imgBarSmall2 div img,.imgButton div img{position:absolute;left:-107px;height:100%;white-space:nowrap}.imgBar div.topArt img.smallPreview,.imgBarSmall div img.smallPreview,.imgBarSmall2 div img.smallPreview,.imgButton div img.smallPreview{position:static;left:0}.imgBar .headline,.imgBarSmall .headline,.imgBarSmall2 .headline,.imgButton .headline{background:url("../images/style/vorschaubox.png");height:46px;position:absolute;bottom:0;width:235px}.imgBar .headline>a,.imgBarSmall .headline>a,.imgBarSmall2 .headline>a,.imgButton .headline>a{display:table-cell;vertical-align:middle;height:46px;padding:0 15px;text-align:center;width:235px}.imgBar h2,.imgBarSmall h2,.imgBarSmall2 h2,.imgButton h2,.imgButton .headline>a>div{font-size:10pt;font-weight:bold;color:#333;text-align:center;white-space:normal;padding:8px 0;max-height:30px;line-height:18px;-webkit-text-shadow:1px 1px 1px #fff;-moz-text-shadow:1px 1px 1px #fff;text-shadow:1px 1px 1px #fff}.imgBar h3,.imgBarSmall h3,.imgBarSmall2 h3,.imgButton h3{display:none}.imgBar>div{width:200%;white-space:nowrap;position:relative;left:0}.imgBar>div>div,.imgBarSmall>div.art,.imgBarSmall2>div.art,.imgButton>div.art{width:235px;height:150px;margin-right:8px;overflow:hidden;display:inline;position:relative;float:left;cursor:pointer;text-align:center}.imgButton>div.art{position:absolute;top:0;display:none}.imgButton>div.art:first-child{display:inline}.headline a{text-decoration:none;color:inherit}.column{width:235px;margin-left:8px;float:left}.column2{width:478px;margin-right:8px;margin-left:8px;float:left}.column3{width:721px;margin-left:8px;float:left}.column4{width:964px;margin-left:8px;float:left}.rcolumn{width:235px;margin-right:8px;float:right}.rcolumn2{width:478px;margin-right:8px;float:right}.infscroll{width:486px;float:right}.rcolumn3{width:721px;margin-right:8px;float:right}.rcolumn2.box .excerpt:first-child{border-top-left-radius:5px;border-top-right-radius:5px}.rcolumn2.box .excerpt:last-child{border-radius:5px}.rcolumn2.box{padding:5px;box-sizing:border-box;border:1px solid #6388b2;border-radius:5px;-webkit-box-shadow:2px 2px 3px 0 rgba(0,0,0,0.1);-moz-box-shadow:2px 2px 3px 0 rgba(0,0,0,0.1);box-shadow:2px 2px 3px 0 rgba(0,0,0,0.1)}.column,.column2,.column3,.rcolumn,.rcolumn2,.rcolumn3,.column4{margin-bottom:8px}.imgBarSmall,.imgBarSmall2{width:486px;height:160px;white-space:nowrap;position:relative;margin-right:0;padding-bottom:10px;background:url('../images/style/shadow_bottom_half.png') no-repeat bottom;background-color:#fff}.imgBarSmall2{height:318px;position:relative;margin-right:0;padding-bottom:10px;background:url('../images/style/shadow_bottom_half.png') no-repeat bottom;background-color:#fff}.imgBarSmall div.bgrdTop,.imgBarSmall2 div.bgrdTop{height:10px;width:100%;background:url('../images/style/shadow_top_half.png') no-repeat top;background-color:#fff}.imgBarSmall2>.art{margin-bottom:8px}.excerpt{cursor:pointer;border-bottom:1px solid #e1e1e1;padding-bottom:10px;margin-bottom:5px;color:#333;overflow:auto}.excerpt.nolink{cursor:inherit}.excerpt:last-of-type,.excerpt.lastItem{border-bottom-width:0;margin-bottom:0}.excerpt>div{overflow:auto}.excerpt>div>a{color:#333;text-decoration:none}.excerpt:hover>div>a{text-decoration:underline}.excerpt>div>a.special,.excerpt:hover>div>a.special{text-decoration:none;margin-right:8px;display:block;float:right;font-size:7.5pt;font-weight:bold}.excerpt>div>a.special img{vertical-align:middle}.excerpt>div>span{margin-top:8px;display:block;font-size:8pt;line-height:11pt}.excerpt h2{font-size:10pt;padding:0;margin:0;line-height:13pt;font-weight:bold}.excerpt h3{font-size:9.5pt;padding:0;margin:0;line-height:13pt;font-weight:normal}.excerpt time,.excerpt .smallFont{font-size:7.5pt}.excerpt time i.fa{font-size:10pt}.excerpt figure{width:64px;min-height:64px;float:left;margin:0;text-align:center;padding-right:10px;padding-top:10px}.excerpt figure img{max-height:64px;max-width:64px}main div#infscr-loading{clear:both;text-align:center;width:490px}a#goup{text-decoration:none;z-index:6;opacity:0;position:absolute;bottom:130px;right:40px;font-size:35px;color:#d9d9d9;cursor:pointer}#share{width:450px;position:absolute;top:190px;right:0;z-index:1;display:inline}#share .settings_info,#share2 .settings_info{display:none}#share .social_share_privacy_area.line li .dummy_btn{margin:0 5px}#share .social_share_privacy_area.line li{float:right}div[itemprop="breadcrumb"] a,div.prevnextlinks a{text-decoration:none;color:grey}div[itemprop="breadcrumb"] a:hover,div.prevnextlinks a:hover{text-decoration:underline}div[itemprop="breadcrumb"] i,div.prevnextlinks a i{font-size:90%;color:grey}div[itemprop="breadcrumb"]{font-size:90%;margin:8px;height:20px;line-height:20px}div.prevnextlinks a{font-size:12px}main.article div[itemprop="breadcrumb"]{position:absolute;top:227px}main.article.nobg{background:white}main.article{background:#f8f8f8}article nav.rcolumn span{float:left;width:35px;margin-top:6px;line-height:15px;text-align:center}article nav.rcolumn a,section nav.rcolumn a{display:block;padding-left:35px;font-weight:bold;margin-top:6px;line-height:15px;text-decoration:none;word-wrap:break-word}article nav.rcolumn a:hover,section nav.rcolumn a:hover{text-decoration:underline}article nav.rcolumn a.anker{margin-left:35px;padding-left:0;font-weight:normal;margin-top:0}article .rcolumn figure{text-align:center;margin:1em 25px}article .rcolumn figure img{max-width:100%;max-height:110px}article .rcolumn figure img[src*=".svg"]{width:100%}article .rcolumn,section .rcolumn{margin:0;padding:16px 8px;border-bottom:1px solid #ededed;width:226px;font-size:8pt;clear:right}article .rcolumn.teaser,section .rcolumn.teaser{padding:16px 4px;width:234px;text-align:center}section div[itemprop="breadcrumb"]{margin:8px 0}article .column3,.column3.articletext,.clearfix.articlefix{padding:10px 8px;margin:0;border-right:1px solid #ededed;border-top:1px solid #ededed;background:white}.nomarginb{margin-bottom:0}.excerpt.nomarginb{padding-top:5px}.greyBg{background:#f7f7f7}.clearfix.articlefix{width:721px;min-height:353px}.autoropinion{font-size:90%}.autoropinion figure{float:right;padding:0;margin:0 0 8px 8px}article .column3,section .column3:first-of-type{padding-top:36px;border-top-width:0}article .column3 h2{font-size:18px}article .column3 h3,article .column3 h4,article .column3 .h3,.column3.articletext .h3{font-size:14px;font-weight:bold}article .column3 h3,article .column3 h4{color:#505050}.downloadWidget table a{font-size:12px}.downloadWidget table{font-size:11px}.downloadWidget .small{display:block;font-size:11px;color:grey}.downloadWidget h3{line-height:inherit;margin-bottom:15px;font-size:14px;font-weight:bold}.pagination{overflow:hidden;font-size:9pt}.pagination a .fa{height:23px;line-height:23px}.pagination div{float:left;width:17px;text-align:center;margin-right:3px;padding:0 3px}.pagination a,.pagination span{display:block;float:left;min-width:17px;height:23px;background:#ededed;text-align:center;line-height:23px;border-radius:15%;margin-right:3px;color:#3770ad;text-decoration:none;font-weight:bold;border:1px solid #ededed;padding:0 3px}.pagination a:hover{border:1px solid #3770ad}.pagination span{background:#3770ad;color:white;text-decoration:none;border:1px solid #3770ad}#commentContainer form{margin-bottom:8px}#commentContainer .error{color:red;clear:both;margin:8px 0}.rcolumn.ukat a{display:block}section .rcolumn h2{font-size:11px;font-weight:bold;line-height:20px}div.wrap>footer{max-width:1780px;background-color:inherit}div.wrap>footer>div:first-child,div.wrap>footer>div:nth-child(2){height:90px;padding:5px 0 5px 0;text-align:center}div.wrap.forum div#header{border-top-left-radius:8px}div.wrap.forum div#header .frame,div.wrap.forum div#header{border-top-right-radius:8px}div.wrap.forum>div.fullcontainer{padding-bottom:8px}div.wrap.forum>footer>div:first-child,div.wrap.forum>footer>div:nth-child(2){padding:0;text-align:left}div.wrap>footer>div.gradient{background-color:#6388b2;background:radial-gradient(ellipse at top,#a8bdd4 -10%,#6388b2 65%);height:150px}div.wrap>footer>div.gradient>div.fullcontainer{height:100%}body>.fixed>footer{position:fixed;bottom:-270px;width:100%}body>div.fixed{padding-bottom:45px}div.wrap>footer .separator{border-right:1px dotted #e1e1e1;width:1px}div.wrap>footer .footernavbox>div{text-transform:none;margin:8px 10px;font-size:13px;font-weight:bold}div.wrap>footer #copyright{width:200px;right:110px;bottom:8px;position:absolute;font-size:8pt;text-align:right}div.wrap>footer nav{display:table;position:relative;left:110px}div.wrap>footer nav ul{-webkit-margin-before:0;-webkit-margin-start:0;-webkit-margin-after:0;-webkit-padding-start:25px;margin:0;padding:0 0 0 25px}div.wrap>footer nav ul li{font-size:10px;line-height:12px;padding-left:5px}div.wrap>footer nav ul li a{color:#000;margin-left:-5px}div.wrap>footer nav>div{float:left;height:100px;margin-top:10px;display:table-cell;overflow:auto}.footernavbox{background:#fff;margin:10px 4px;width:188px}div.wrap>footer nav .footernavbox:first-child{margin-left:0}div.wrap>footer nav a{color:#fff;text-decoration:none}div.wrap>footer nav a:hover{color:#6388b2}div.wrap>footer .socialIcons{position:absolute;left:1100px;top:10px;text-align:left;width:180px}div.wrap>footer .socialIcons a{font-size:21px;line-height:27px;margin-right:5px;color:white;display:block;height:27px;width:35px;text-align:center;float:left}div.wrap>footer .socialIcons a span.fa-stack{width:26px;height:26px;line-height:26px;text-align:center}div.wrap>footer #partner a{color:#333;font-weight:bold;font-size:8pt;margin-right:8px}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}.clearfix{zoom:1}/*!
     *  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-user

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

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

fa-user

fa-user

fa-user

fa-user

fa-user

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

CSS3 animations aren't supported in IE8 - IE9.

fa-user on fa-square-o
fa-user on fa-circle
fa-userl on fa-square
fa-ban on fa-user

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

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

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

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



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