Font Awesome icon usage statistics

  • 4 types of Font Awesome iconic font are used and found 5 times in total.
  • MYSTEAMGAUGE.COM used 1.3 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of MYSTEAMGAUGE.COM are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • MYSTEAMGAUGE.COM includes "http://www.mysteamgauge.com/static/A.style.css+font-awesome.min.css,Mcc.KeTfjQ1ga-.css.pagespeed.cf.j1APvwmeEB.css" to use Font Awesome and information from CSS is like below.
  • @font-face{
        font-family: ImpactEmb;
        src: url('IMPACT.TTF'); /* IE9+ */
    }body{margin:0px;color:#eee;font-family:Helvetica,Arial,sans-serif;background-color:#3b3938}@media only screen and (max-width:640px){body,body>div,#gamelist{width:100%!important}#siteinfo{width:90%!important}#content_main{margin-top:50px!important}#hanging_nav>div{width:100%!important;-moz-border-radius:0px!important;-webkit-border-radius:0px!important;border-radius:0px!important}#hanging_nav div span{font-size:.7em!important}#hanging_nav .pipe{margin:0px 12px!important}h1{margin-left:0px!important}#lightscreenform{max-width:200px;left:25%!important}#gamelist, #topsummary, #userform input, #optionbox, #optionbox ~ label{font-size:.75em!important}#useravatar{height:3em!important}.friend_avatar{height:7em!important}#socialdiv{margin-left:0px!important}.multi-column{-moz-column-count:1!important;-webkit-column-count:1!important;column-count:1!important}#optionbox{display:block!important}#summary_options{clear:both}.ad_div{width:100%!important}}@media only screen and (max-width:380px){h1{font-size:200%!important;margin:20px auto!important}#lightscreenform{left:15%!important}#topsummary, #userform input, #optionbox, #optionbox ~ label{font-size:65%!important}#gamelist{font-size:60%!important}#userform{width:180px!important;padding:0px!important}#useravatar,.friend_avatar{height:3em!important}.app_icon{display:none!important}#checkbox_header,#type_header,#gameid_header,#gamename_header,#os_header,#playtime_header,#value_header,#size_header,#unit_header{width:auto!important}}.multi-column{-moz-column-count:2;-webkit-column-count:2;column-count:2}a{color:#61892b;text-decoration:none}a:hover{text-decoration:underline}h1{font-size:4em;font-weight:normal;letter-spacing:3px;margin:0px;font-family:ImpactEmb,Impact,Helvetica,Arial,sans-serif;text-transform:uppercase;text-shadow:-1px -1px 0px rgba(0,0,0,.7);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}h2{font-size:1.2em;padding:0px}#hanging_nav{width:100%;position:absolute;top:0px;margin:0px;padding:0px;text-align:center;font-size:1em;font-weight:normal;letter-spacing:3px;font-family:ImpactEmb,Impact,Helvetica,Arial,sans-serif;text-transform:uppercase;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:none}#hanging_nav .pipe{margin:0px 25px;color:#3d3d3d}#hanging_nav>div{margin:0px auto;padding:10px 0px;-webkit-border-bottom-left-radius:3px;-webkit-border-bottom-right-radius:3px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;border-bottom-left-radius:3px;border-bottom-right-radius:3px;max-height:50px;width:640px;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod?EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background-color:#61892b;background-image:linear-gradient(top,#84bc3c 37%,#3d571b 100%);background-image:-o-linear-gradient(top,#84bc3c 37%,#3d571b 100%);background-image:-moz-linear-gradient(top,#84bc3c 37%,#3d571b 100%);background-image:-webkit-linear-gradient(top,#84bc3c 37%,#3d571b 100%);background-image:-ms-linear-gradient(top,#84bc3c 37%,#3d571b 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(.37,#84bc3c),color-stop(1,#3d571b))}#hanging_nav span{white-space:pre}#hanging_nav a{text-decoration:none;color:#3d3d3d;vertical-align:bottom;text-shadow:1px 1px 0px #b0aeac}#hanging_nav a:hover{color:#eee!important;text-shadow:1px 1px 0px #3d3d3d}#useravatar{float:left;height:9em;margin-right:1em}#socialdiv{font-size:.75em}.custom-share{display:inline-block;font-size:1.5em;margin:0px .5em;border:0px solid #ccc;width:1em;height:1em;text-decoration:none!important}#userhead{font-family:Helvetica,Arial,sans-serif;text-shadow:#3d3d3d 1px 1px 1px}#userform{margin:0px auto;padding:0px 5px 0px 0px;width:235px}#userform input[type="text"]{height:28px;border:0px solid #3d3d3d;padding:0px 5px;background-color:#757370;color:#cdcac1;outline:none;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:inset 0 0 1px #000;-webkit-box-shadow:inset 0 0 1px #000;box-shadow:inset 0 0 1px #000}#userform input[type="submit"]{height:28px;cursor:pointer;color:#e5e4dc;margin-left:2em;padding:0px 5px;border:0px solid #3d3d3d;-webkit-border-radius:3px;border-radius:3px;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg0YmMzYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZDU3MWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background-color:#61892b;background-image:linear-gradient(top,#84bc3c 37%,#3d571b 100%);background-image:-o-linear-gradient(top,#84bc3c 37%,#3d571b 100%);background-image:-moz-linear-gradient(top,#84bc3c 37%,#3d571b 100%);background-image:-webkit-linear-gradient(top,#84bc3c 37%,#3d571b 100%);background-image:-ms-linear-gradient(top,#84bc3c 37%,#3d571b 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(.37,#84bc3c),color-stop(1,#3d571b))}#userform input[type="submit"]:hover{cursor:pointer;color:#fff}#optionbox{background-color:#262626;color:#b8b6b4;padding:5px;margin:.5em 0px;border:1px solid #3b3938;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}#game_total_bar,#game_selection_bar{-o-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;transition:all .1s ease-in-out}#topsummary{color:#eee;padding:5px;font-size:.9em}#gamelist{-moz-box-shadow:0px 0px 1px black;-webkit-box-shadow:0px 0px 1px black;box-shadow:0px 0px 1px black;text-shadow:#3d3d3d 1px 1px 1px;font-size:.8em;border-spacing:0;max-width:800px;margin:0px auto;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#gamelist td{padding:1em .5em}#gamelist th{font-size:.9em;padding:1em .5em;text-shadow:0 -1px 0 rgba(0,0,0,.4);-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2)}#headerrow{font-weight:bold;color:#fff;text-align:left;border-bottom:1px solid #2f2f2f}#checkbox_header,#type_header,#gameid_header,#gamename_header,#os_header,#controller_header,#metascore_header,#multiplay_header,#playtime_header,#value_header,#size_header{border-right:1px inset #3d3d3d}#checkbox_header{width:5%;text-align:left}#type_header{width:5%;text-align:left}#gameid_header{width:8%;text-align:left}#gamename_header{width:53%;text-align:left}#os_header{text-align:center}#controller_header{text-align:center}#metascore_header{word-break:hyphenate;text-align:center}#multiplay_header{word-break:hyphenate;text-align:center}#playtime_header{width:6%;text-align:center}#value_header{width:10%;text-align:center}#size_header{width:8%;text-align:right}#unit_header{width:5%;text-align:left}#headerrow th{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzc0NzA2ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZDNkM2QiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:#74706f;background:-moz-linear-gradient(top,#74706f 0%,#3d3d3d 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#74706f),color-stop(100%,#3d3d3d));background:-webkit-linear-gradient(top,#74706f 0%,#3d3d3d 100%);background:-ms-linear-gradient(top,#74706f 0%,#3d3d3d 100%);background:linear-gradient(to bottom,#74706f 0%,#3d3d3d 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#74706f', endColorstr='#3d3d3d',GradientType=0)
    }#headerrow,#checkbox_header{-webkit-border-top-left-radius:5px;-moz-border-radius-topleft:5px;border-top-left-radius:5px}#headerrow,#unit_header{-webkit-border-top-right-radius:5px;-moz-border-radius-topright:5px;border-top-right-radius:5px}#headerrow:hover{cursor:pointer}.app_icon{width:2em;-webkit-border-radius:2px;border-radius:2px;float:left;margin:0px 1em 0px 0px;border:0px solid #000}.app_title{display:table-cell}.flag{display:none;margin-top:-150%;position:relative;right:100%;text-align:center}.flag i{cursor:pointer;height:3em;line-height:3em}.gamerow:hover+.flag,.flag:hover{display:block}.gamerow{background-color:gray;color:#eee}.gamerow:hover{background:#3d3d3d;cursor:pointer}#checkbox_footer,#type_footer,#gameid_footer,#gamename_footer,#size_footer,#unit_footer{text-align:left}#playtime_footer,#value_footer,#size_footer{text-align:right}#summary{cursor:default;font-weight:bold;color:#fff;text-align:left;border-top:1px solid #a0a0a0}#summary td{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzc0NzA2ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZDNkM2QiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:#74706f;background:-moz-linear-gradient(top,#74706f 0%,#3d3d3d 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#74706f),color-stop(100%,#3d3d3d));background:-webkit-linear-gradient(top,#74706f 0%,#3d3d3d 100%);background:-o-linear-gradient(top,#74706f 0%,#3d3d3d 100%);background:-ms-linear-gradient(top,#74706f 0%,#3d3d3d 100%);background:linear-gradient(to bottom,#74706f 0%,#3d3d3d 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#74706f', endColorstr='#3d3d3d',GradientType=0)}.type_col,.gameid_col,.gamename_col,.unit_col{text-align:left}.playtime_col,.size_col,.playtime_col,.value_col{text-align:right}#lightscreen{color:#3d3d3d;width:100%;height:100%;position:fixed;top:0px;left:0px;background-color:rgba(0,0,0,.3);z-index:50}#lightscreenform{color:#3d3d3d;max-width:200px;padding:15px;-webkit-border-radius:10px;border-radius:10px;border:5px solid #3d3d3d;background:#fff;position:fixed;left:40%;top:25%;z-index:51;-webkit-box-shadow:0px 0px 5px black;box-shadow:0px 0px 5px black}.page{margin:2em auto;width:35em;border:5px solid #ccc;padding:.8em;background:#fff}.entries{list-style:none;margin:0;padding:0}.entries li{margin:.8em 1.2em}.entries li h2{margin-left:-1em}.add-entry{font-size:.9em;border-bottom:1px solid #ccc}.add-entry dl{font-weight:bold}.metanav{text-align:right;font-size:.8em;padding:.3em;margin-bottom:1em;background:#fafafa}.flash{background:#cee5f5;padding:.5em;border:1px solid #aacbe2}.error{background:#f0d6d6;padding:.5em}@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-dashboard

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

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

icon-dashboard

icon-dashboard

icon-dashboard

icon-dashboard

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

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

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

CSS3 animations aren't supported in IE8 - IE9.

icon-dashboard on icon-check-empty
icon-dashboard on icon-circle
icon-dashboardl on icon-sign-blank
icon-ban-circle on icon-dashboard

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