Font Awesome icon usage statistics

  • 6 types of Font Awesome iconic font are used and found 9 times in total.
  • XDATE.CH used 1.5 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of XDATE.CH are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • XDATE.CH includes "http://www.xdate.ch/css/portalbundle_app.css" to use Font Awesome and information from CSS is like below.
  • /**/
              line-height: 14px;
              margin-top: -2px; }
          .memberarea .membercontent .conversation-overview .list-container .list-item .content .title {
            margin-bottom: 5px;
            width: 100%; }
          .memberarea .membercontent .conversation-overview .list-container .list-item .content .description {
            overflow: hidden;
            height: 36px; }
        .memberarea .membercontent .conversation-overview .list-container .list-item .unread-msgs {
          position: absolute;
          right: 10px;
          bottom: 10px; }
        .memberarea .membercontent .conversation-detail .head h2 {
          margin-top: 6px; }
        .memberarea .membercontent .conversation-detail .content h3 {
          margin: 0 0 10px;
          font-size: 14px; }
        .memberarea .membercontent .conversation-new-msg .btn, .memberarea .membercontent .conversation-new-msg .dataTables_paginate .pagination .paginate_button a, .dataTables_paginate .pagination .paginate_button .memberarea .membercontent .conversation-new-msg a {
          margin-top: 15px; }
        .memberarea .membercontent .msg-history .bubble {
          position: relative;
          margin: 10px 5px;
          padding: 5px 10px;
          border-radius: 10px;
          max-width: 90%;
          clear: both; }
          .memberarea .membercontent .msg-history .bubble.unread .msg {
            font-weight: bold; }
          .memberarea .membercontent .msg-history .bubble.me {
            float: left;
            border-color: #C51713;
            background-color: #F9B8B6;
            background-color: rgba(197, 23, 19, 0.3); }
            .memberarea .membercontent .msg-history .bubble.me p .info {
              color: #ae1411; }
            .memberarea .membercontent .msg-history .bubble.me .pointer {
              left: 15px;
              background-color: #F9B8B6;
              background-color: rgba(197, 23, 19, 0.3);
              background-image: url("/bundles/omsmessagecenter/img/bubble-pointer-left.png"); }
          .memberarea .membercontent .msg-history .bubble.counterpart {
            float: right;
            background-color: #dfdfdf; }
            .memberarea .membercontent .msg-history .bubble.counterpart p {
              text-align: right; }
            .memberarea .membercontent .msg-history .bubble.counterpart .info {
              float: right;
              color: #797979; }
            .memberarea .membercontent .msg-history .bubble.counterpart .pointer {
              right: 15px;
              background-color: #dfdfdf;
              background-image: url("/bundles/omsmessagecenter/img/bubble-pointer-right.png"); }
          .memberarea .membercontent .msg-history .bubble.hide-on-load {
            display: none; }
          .memberarea .membercontent .msg-history .bubble p {
            font-size: 14px;
            margin-bottom: 0; }
          .memberarea .membercontent .msg-history .bubble .info {
            font-size: 12px;
            line-height: 20px; }
          .memberarea .membercontent .msg-history .bubble .pointer {
            position: absolute;
            top: 100%;
            width: 20px;
            height: 12px;
            background-position: left bottom;
            background-repeat: no-repeat; }
        .memberarea .membercontent .msg-history .load-more {
          display: block;
          margin: 20px auto;
          text-align: center; }
    #content-page a {
      color: #C51713; }
    #content-page h2 {
      display: block;
      float: none;
      padding: 20px 0 16px;
      text-align: center;
      font-size: 16px;
      border-radius: 6px 6px 0 0;
      background: -webkit-linear-gradient(top, #e9e9e9 43%, #cdcdcd 90%);
      background: -moz-linear-gradient(top, #e9e9e9 43%, #cdcdcd 90%);
      background: -ms-linear-gradient(top, #e9e9e9 43%, #cdcdcd 90%);
      background: -o-linear-gradient(top, #e9e9e9 43%, #cdcdcd 90%);
      background: linear-gradient(to bottom, #e9e9e9 43%, #cdcdcd 90%);
      border: 1px solid #cdcdcd;
      border-bottom: 1px solid #b4b4b4; }
    #content-page .faq-box {
      padding: 25px 20px 20px;
      margin-bottom: 20px;
      border-radius: 0 0 6px 6px;
      border-left: 1px solid #cdcdcd;
      border-right: 1px solid #cdcdcd;
      border-bottom: 1px solid #b4b4b4;
      background-color: #ffffff;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
    #content-page .middlebox {
      padding: 14px 5px 17px 5px;
      text-align: center;
      border-left: 1px solid #cdcdcd;
      border-right: 1px solid #cdcdcd;
      border-bottom: 1px solid #dedede;
      background-color: #ffffff;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
      #content-page .middlebox.last {
        border-radius: 0 0 6px 6px;
        margin-bottom: 30px; }
      #content-page .middlebox h3 {
        font-size: 16px;
        line-height: 25px;
        font-weight: bold;
        margin: 0 0 5px; }
      #content-page .middlebox p {
        color: #939393;
        margin: 0; }
        #content-page .middlebox p a {
          display: block; }
          #content-page .middlebox p a:hover {
            text-decoration: underline; }
    #content-page .premiumbutton {
      display: block;
      color: #ffffff !important;
      margin: 5px;
      padding: 16px 0;
      font-size: 16px;
      border-radius: 6px;
      text-align: center;
      background-color: #be1513;
      background: -webkit-linear-gradient(top, #be1513, #8d0c0a);
      background: -moz-linear-gradient(top, #be1513, #8d0c0a);
      background: -ms-linear-gradient(top, #be1513, #8d0c0a);
      background: -o-linear-gradient(top, #be1513, #8d0c0a);
      background: linear-gradient(to bottom, #be1513, #8d0c0a);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
      border: 1px solid #8d0d0a;
      border-bottom: 1px solid #bbb; }
      #content-page .premiumbutton:hover {
        background: #b01312;
        background: -webkit-linear-gradient(top, #b01312, #820a08);
        background: -moz-linear-gradient(top, #b01312, #820a08);
        background: -ms-linear-gradient(top, #b01312, #820a08);
        background: -o-linear-gradient(top, #b01312, #820a08);
        background: linear-gradient(to bottom, #b01312, #820a08); }
    #content-page .offerboxes a, #content-page .price_box a {
      color: inherit; }
    #content-page .offerboxes .freeofferbox, #content-page .price_box .freeofferbox {
      margin-top: 27px; }
      #content-page .offerboxes .freeofferbox .topbox, #content-page .price_box .freeofferbox .topbox {
        display: block;
        font-weight: bold;
        font-size: 24px;
        padding: 20px 0 16px;
        text-align: center;
        border-radius: 6px 6px 0 0;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        border: 1px solid #cdcdcd;
        border-bottom: 1px solid #b4b4b4;
        background: #eaeaed;
        background: -webkit-linear-gradient(top, #eaeaed, #cecfd2);
        background: -moz-linear-gradient(top, #eaeaed, #cecfd2);
        background: -ms-linear-gradient(top, #eaeaed, #cecfd2);
        background: -o-linear-gradient(top, #eaeaed, #cecfd2);
        background: linear-gradient(to bottom, #eaeaed, #cecfd2); }
      #content-page .offerboxes .freeofferbox .bottombox, #content-page .price_box .freeofferbox .bottombox {
        font-size: 18px;
        padding: 25px 0 20px;
        font-weight: bold;
        text-align: center;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        border-left: 1px solid #cdcdcd;
        border-right: 1px solid #cdcdcd;
        border-bottom: 1px solid #b4b4b4;
        border-radius: 0 0 6px 6px;
        background-color: #ffffff; }
        #content-page .offerboxes .freeofferbox .bottombox a:hover, #content-page .price_box .freeofferbox .bottombox a:hover {
          text-decoration: underline; }
    #content-page .offerboxes .outerpremiumofferbox, #content-page .price_box .outerpremiumofferbox {
      position: relative;
      background-color: #C51713;
      padding: 3px;
      border-radius: 9px;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }
      #content-page .offerboxes .outerpremiumofferbox .premiumbadge, #content-page .price_box .outerpremiumofferbox .premiumbadge {
        position: absolute;
        top: -2px;
        right: -2px;
        width: 97px;
        height: 57px;
        background: url("/bundles/omscontent/img/premium_badge.png") no-repeat; }
      #content-page .offerboxes .outerpremiumofferbox .topbox, #content-page .price_box .outerpremiumofferbox .topbox {
        display: block;
        padding: 20px 0 16px 0;
        text-align: center;
        color: #ffffff;
        font-weight: bold;
        font-size: 30px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        border: 1px solid #8d0d0a;
        border-bottom: 1px solid #bbb;
        border-radius: 6px 6px 0 0;
        background: -webkit-linear-gradient(top, #be1513, #8d0c0a);
        background: -moz-linear-gradient(top, #be1513, #8d0c0a);
        background: -ms-linear-gradient(top, #be1513, #8d0c0a);
        background: -o-linear-gradient(top, #be1513, #8d0c0a);
        background: linear-gradient(to bottom, #be1513, #8d0c0a); }
        #content-page .offerboxes .outerpremiumofferbox .topbox span, #content-page .price_box .outerpremiumofferbox .topbox span {
          display: block;
          text-shadow: 0px 2px 5px #000; }
          #content-page .offerboxes .outerpremiumofferbox .topbox span.subheadline, #content-page .price_box .outerpremiumofferbox .topbox span.subheadline {
            text-shadow: 1px 1px 2px #000;
            font-size: 12px; }
      #content-page .offerboxes .outerpremiumofferbox .bottombox, #content-page .price_box .outerpremiumofferbox .bottombox {
        padding: 1px 0;
        background-color: #ffffff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        border-radius: 0 0 6px 6px; }
    #content-page .price_box {
      margin-top: 50px; }
      #content-page .price_box .freeofferbox {
        margin-top: 0; }
        #content-page .price_box .freeofferbox .premiumbutton {
          width: 250px;
          margin: 0 auto; }
      #content-page .price_box table td {
        background: none; }
        #content-page .price_box table td.feature {
          padding-left: 0; }
        #content-page .price_box table td.cost {
          text-align: right; }
    #content-page .agb ol {
      font-weight: bold;
      font-size: 12px;
      padding-left: 30px;
      margin-top: 20px; }
      #content-page .agb ol p {
        font-weight: normal; }
        #content-page .agb ol p.lead {
          font-size: 12px;
          font-weight: bold; }
    #content-page .banners .middlebox {
      padding: 30px 40px; }
      #content-page .banners .middlebox .preview img {
        margin: 0 auto; }
      #content-page .banners .middlebox .banner-code-title {
        margin: 15px 0; }
      #content-page .banners .middlebox textarea {
        padding: 10px;
        font-size: 12px;
        border-radius: 4px;
        border: 1px solid #b6b6b6;
        color: #575757;
        width: 100%;
        background-color: #f4f4f4; }
    #content-page .banner-prices .middlebox {
      text-align: left;
      padding: 14px 20px 17px; }
      #content-page .banner-prices .middlebox h3 {
        margin: 12px 0 28px 0; }
      #content-page .banner-prices .middlebox img {
        border-radius: 5px; }
      #content-page .banner-prices .middlebox .description {
        margin-top: 20px; }
        #content-page .banner-prices .middlebox .description .format .value, #content-page .banner-prices .middlebox .description .price .value {
          font-weight: bold; }
        #content-page .banner-prices .middlebox .description .price {
          text-align: right; }
      #content-page .banner-prices .middlebox .premiumbutton {
        margin: 0 auto;
        width: 250px; }
    #content-page .contact-info {
      padding: 20px; }
      #content-page .contact-info .hotline {
        float: right;
        padding-left: 70px;
        background: url("/bundles/omsportal/img/xdate_sprite.png") -745px -326px no-repeat; }
        #content-page .contact-info .hotline p {
          text-align: center;
          margin-bottom: 0; }
          #content-page .contact-info .hotline p.office-hours {
            font-size: 11px; }
    #content-page .contact-form label.required:after {
      content: " *";
      color: #C51713; }
    #content-page .contact-form hr {
      margin: 20px 0; }
    #content-page .contact-form .required-fields {
      color: #C51713;
      font-size: 11px; }
    #content-page .more-offers {
      padding-bottom: 0; }
      #content-page .more-offers .offer {
        display: block;
        padding: 3px 10px 10px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        border: 1px solid #cdcdcd;
        border-top: 1px solid #be1818;
        margin-bottom: 20px;
        background-color: #f9f9f9;
        color: #4D4D4D; }
        #content-page .more-offers .offer:hover {
          text-decoration: underline; }
        #content-page .more-offers .offer p {
          margin: 15px 0;
          text-align: center;
          font-size: 16px; }
        #content-page .more-offers .offer img {
          margin: 0 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-sort

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

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

fa-sort

fa-sort

fa-sort

fa-sort

fa-sort

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

CSS3 animations aren't supported in IE8 - IE9.

fa-sort on fa-square-o
fa-sort on fa-circle
fa-sortl on fa-square
fa-ban on fa-sort

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

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

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

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



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