Font Awesome icon usage statistics

  • 7 types of Font Awesome iconic font are used and found 9 times in total.
  • EDMONTONREALESTATE.CA used 1.3 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of EDMONTONREALESTATE.CA are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • EDMONTONREALESTATE.CA includes "http://www.EDMONTONREALESTATE.CA/inc/cache/css/static.10e960578b8d656a3e957ed76ddb7ffa.4.3.108.css" to use Font Awesome and information from CSS is like below.
  • @font-face{font-family:'bebas_neueregular';src:url('/inc/skins/custom/css/type/BebasNeue-webfont.eot');src:url('/inc/skins/custom/css/type/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),url('/inc/skins/custom/css/type/BebasNeue-webfont.woff') format('woff'),url('/inc/skins/custom/css/type/BebasNeue-webfont.ttf') format('truetype'),url('/inc/skins/custom/css/type/BebasNeue-webfont.svg#bebas_neueregular') format('svg');font-weight:normal;font-style:normal;}.text-shadow-dark-text{text-shadow:-1px -1px 1px rgba(255, 255, 255, 0.45);}.text-shadow-light-text{text-shadow:0 -1px 1px rgba(0, 0, 0, 0.5);}.link-transition{-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease;transition:all 0.5s ease;}.site-box-shadow{-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.8);-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.8);box-shadow:0 1px 4px rgba(0, 0, 0, 0.8);}.imageScale{-webkit-transform:scale(1.25);-moz-transform:scale(1.25);-o-transform:scale(1.25);transform:scale(1.25);}.primaryButton{background:#2681e2;background:-moz-linear-gradient(top, #2681e2 50%, #1d4dd1 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #2681e2), color-stop(100%, #1d4dd1));background:-webkit-linear-gradient(top, #2681e2 50%, #1d4dd1 100%);background:-o-linear-gradient(top, #2681e2 50%, #1d4dd1 100%);background:-ms-linear-gradient(top, #2681e2 50%, #1d4dd1 100%);background:linear-gradient(to bottom, #2681e2 50%, #1d4dd1 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2681e2', endColorstr='#1d4dd1', GradientType=0);border:none;-webkit-box-shadow:inset 0 0 4px 0 rgba(0, 0, 0, 0.25);box-shadow:inset 0 0 4px 0 rgba(0, 0, 0, 0.25);text-shadow:0 -1px 1px rgba(0, 0, 0, 0.5);font-weight:normal;}.comments{background:#f1f1f1;padding:20px;margin:0 0 22px 0;*zoom:1;clear:both;}.comments:before,.comments:after{content:"";display:table;}.comments:after{clear:both;}.comments h2{margin-bottom:20px;}.comments .btnset{border:1px solid #b7b7b7;border-top:none;background:#dbdbdb;margin-top:-3px;padding:10px;}.comments .btnset label{color:#666;text-shadow:0 1px 0 #fff;}.comments .field{clear:left;padding:20px 0 0 0 !important;}.comments section{padding:0 0 20px 0;border-bottom:1px solid #ccc;}.comments section:last-child{padding:0;border-bottom:none;}.comments .comment{position:relative;clear:left;padding:10px 0;margin:0 0 10px 0;*zoom:1;border-bottom:1px solid #ccc;}.comments .comment:before,.comments .comment:after{content:"";display:table;}.comments .comment:after{clear:both;}.comments .comment .author{float:left;width:100px;}.comments .comment .author img{border:1px solid #bcbcbc;padding:4px;background:#fff;}.comments .comment .author p{font-weight:bold;}.comments .comment .copy{width:75%;float:right;}.comments .comment:last-child{border-bottom:none;}.comments .comment .copy{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;padding:10px 20px;background:#fff;position:relative;border:1px solid #ccc;}.comments .comment .btnset{padding:10px 0;float:right;clear:right;background:transparent;border:none;}.comments .comment .ui_util_tail{-moz-user-select:none;-webkit-user-select:none;}.comments .comment .ui_util_tail:before{content:"B";color:inherit;font:normal 18px/8px "icosRegular" !important;vertical-align:middle;text-align:center;-moz-user-select:none;-webkit-user-select:none;position:absolute;top:17px;left:-20px;color:#fff;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);transform:rotate(-90deg);z-index:999;text-shadow:0 -1px 0 #999999;}figure{padding:15px;float:left;background:#f7fafc;border:1px solid rgba(0, 0, 0, 0.2);-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;box-shadow:inset 0 1px 0 #fff;}figure img{display:block;border:1px solid #fff;float:left;width:100%;}figure figcaption{padding-top:12px;clear:left;max-width:100%;}figure figcaption h3,figure figcaption h4,figure figcaption h5{margin:0;}figure.last{margin-right:0;}ul{*zoom:1;}ul:before,ul:after{content:"";display:table;}ul:after{clear:both;}.description ul{margin:0;padding:0;}.keyvalSet{overflow:hidden;}.keyval{list-style:none;margin:0;padding:0;}.keyval strong{width:40%;float:left;}.keyval span{width:50%;float:right;}.val{margin:0;}article{position:relative;}article header{margin:0 0 24px;}article header h2,article header h3,article header h3,article header h4{margin:0;}article footer{padding-top:12px;}@font-face{font-family:'FontAwesome';src:url('/inc/skins/brew/css/../fnt/fontawesome-webfont.eot?v=3.2.1');src:url('/inc/skins/brew/css/../fnt/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),url('/inc/skins/brew/css/../fnt/fontawesome-webfont.woff?v=3.2.1') format('woff'),url('/inc/skins/brew/css/../fnt/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),url('/inc/skins/brew/css/../fnt/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');font-weight:normal;font-style:normal;}

Examples and source code

icon-caret-right

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

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

icon-caret-right

icon-caret-right

icon-caret-right

icon-caret-right

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

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

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

CSS3 animations aren't supported in IE8 - IE9.

icon-caret-right on icon-check-empty
icon-caret-right on icon-circle
icon-caret-rightl on icon-sign-blank
icon-ban-circle on icon-caret-right

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