Font Awesome icon usage statistics

  • 9 types of Font Awesome iconic font are used and found 24 times in total.
  • FITNESS-DESSERT.DE used 2.7 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of FITNESS-DESSERT.DE are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • FITNESS-DESSERT.DE includes "https://fitness-dessert.de/wp-content/themes/fitness-dessert2014/style.css?ver=1.0.7" to use Font Awesome and information from CSS is like below.
  • @font-face {
        font-family: 'ocean_sans_stdbook';
        src: url('/wp-content/themes/fitness-dessert2014/fonts/ocean_sans_std_book-webfont.eot');
        src: url('/wp-content/themes/fitness-dessert2014/fonts/ocean_sans_std_book-webfont.eot?#iefix') format('embedded-opentype'),
             url('/wp-content/themes/fitness-dessert2014/fonts/ocean_sans_std_book-webfont.woff2') format('woff2'),
             url('/wp-content/themes/fitness-dessert2014/fonts/ocean_sans_std_book-webfont.woff') format('woff'),
             url('/wp-content/themes/fitness-dessert2014/fonts/ocean_sans_std_book-webfont.ttf') format('truetype'),
             url('/wp-content/themes/fitness-dessert2014/fonts/ocean_sans_std_book-webfont.svg#ocean_sans_stdbook') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'ocean_sans_stdextrabold';
        src: url('/wp-content/themes/fitness-dessert2014/fonts/ocean_sans_std_extrabold-webfont.eot/ocean_sans_std_extrabold-webfont.eot');
        src: url('/wp-content/themes/fitness-dessert2014/fonts/ocean_sans_std_extrabold-webfont.eot?#iefix') format('embedded-opentype'),
             url('/wp-content/themes/fitness-dessert2014/fonts/ocean_sans_std_extrabold-webfont.woff2') format('woff2'),
             url('/wp-content/themes/fitness-dessert2014/fonts/ocean_sans_std_extrabold-webfont.woff') format('woff'),
             url('/wp-content/themes/fitness-dessert2014/fonts/ocean_sans_std_extrabold-webfont.ttf') format('truetype'),
             url('/wp-content/themes/fitness-dessert2014/fonts/ocean_sans_std_extrabold-webfont.svg#ocean_sans_stdextrabold') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
    	font-family:'OceanSansMT-ExtraBoldCond';
    	src: url('/wp-content/themes/fitness-dessert2014/fonts/OceanSansMT-ExtraBoldCond_gdi.eot');
    	src: url('/wp-content/themes/fitness-dessert2014/fonts/OceanSansMT-ExtraBoldCond_gdi.eot?#iefix') format('embedded-opentype'),
    		url('/wp-content/themes/fitness-dessert2014/fonts/OceanSansMT-ExtraBoldCond_gdi.woff') format('woff'),
    		url('/wp-content/themes/fitness-dessert2014/fonts/OceanSansMT-ExtraBoldCond_gdi.ttf') format('truetype'),
    		url('/wp-content/themes/fitness-dessert2014/fonts/OceanSansMT-ExtraBoldCond_gdi.otf') format('opentype'),
    		url('/wp-content/themes/fitness-dessert2014/fonts/OceanSansMT-ExtraBoldCond_gdi.svg#OceanSansMT-ExtraBoldCond') format('svg');
    	font-style: normal;
    	font-stretch: normal;
    	}
    /* Schriftarten */
    /* Bicubic resizing for non-native sized IMG: code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
    .ie7 img {
      -ms-interpolation-mode: bicubic;
    }
    /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
    textarea {
      overflow: auto;
    }
    b, strong {
      font-weight: bold;
    }
    /* Webkit browsers add a 2px margin outside the chrome of form elements */
    button,
    input,
    select,
    textarea {
      margin: 0;
    }
    /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
    pre {
      white-space: pre;
      white-space: pre-wrap;
      word-wrap: break-word;
      background: #f7f7f7;
      padding: 1em;
      margin-bottom: 1.333em;
    }
    /* Normalize monospace sizing: en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
    pre,
    code,
    kbd,
    samp {
      font-family: monospace, sans-serif;
    }
    /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
    a:hover,
    a:active {
      outline: none;
    }
    /* Set sub, sup without affecting line-height: gist.github.com/413930 */
    sub,
    sup {
      font-size: 75%;
      line-height: 0;
      position: relative;
    }
    sup {
      top: -0.5em;
    }
    sub {
      bottom: -0.25em;
    }
    /* Floating & Alignment  */
    .fl {
      float: left;
    }
    .fr {
      float: right;
    }
    .ac {
      text-align: center;
    }
    .ar {
      text-align: right;
    }
    /* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
       j.mp/bestclearfix */
    .fix:before,
    .fix:after,
    .col-full:before,
    .col-full:after {
      content: "\0020";
      display: block;
      height: 0;
      overflow: hidden;
    }
    .fix:after,
    .col-full:after {
      clear: both;
    }
    /* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
    .fix,
    .col-full {
      zoom: 1;
    }
    /*-------------------------------------------------------------------------------------------*/
    /* 1. SETUP */
    /*-------------------------------------------------------------------------------------------*/
    /* 1.1 Defaults */
    body {
      padding: 0 1.618em;
      font: 300 13px/20px "Open Sans", Helvetica, Arial, Sans-serif;
      color: #545454;
      background-color: #fff;
       -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }
    img {
      vertical-align: bottom;
      max-width: 100%;
      height: auto;
    }
    hr {
      background-color: #e1e1e1;
      border: 0;
      height: 1px;
      margin-bottom: 1.5em;
    }
    /* 1.2 Hyperlinks */
    a {
      color: #545454;
      text-decoration: none;
    }
    a:hover {
      color: #bf9764;
      text-decoration: none;
    }
    .clear {
      clear: both;
    }
    /* 1.3 Typography */
    /*
      All typography (and layout) based on a modular scale using 13 & 12 px values scaled in accordance the minor second (1.067)
      http://modularscale.com/scale/?px1=13&px2=12&ra1=1.067&ra2=0
      Remember to keep margins consistent and try to avoid margin-top. If everything has an appropriate margin-bottom we don't need one and vertical rhythm will be kept consistent
    */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: "Georgia", sans-serif;
      color: #545454;
      margin: 0 0 1.067em;
      font-weight: normal;
    }
    h1 a,
    h2 a,
    h3 a,
    h4 a,
    h5 a,
    h6 a {
      font-weight: normal;
    }
    h1 {
      font-size: 36px;
      line-height: 1.067em;
    }
    h2 {
      font-size: 24px;
       line-height: 1.067em;
    }
    h3 {
      font-size: 18px;
    }
    h4 {
      font-size: 16px;
    }
    h5 {
      font-size: 14px;
    }
    h6 {
      font-size:12px;
    }
    p {
      -webkit-hyphens: auto;
      -webkit-hyphenate-character: "\2010";
      -webkit-hyphenate-limit-after: 1;
      -webkit-hyphenate-limit-before: 3;
      -moz-hyphens: auto;
      orphans: 3;
      widows: 3;
    }
    ul,
    ol,
    dl,
    p,
    table,
    form,
    pre,
    hr {
      margin: 0 0 1.067em 0;
    }
    li > ul,
    li > ol {
      margin: 0 0 0 .75em;
    }
    dl dt {
      font-weight: bold;
    }
    dl dd {
      margin-bottom: 1.067em;
    }
    blockquote {
      quotes: "\201C" "\201D";
      position: relative;
      color: #39302d;
    }
    blockquote:before {
      content: "\201C";
      font-family: sans-serif;
      font-size: 3.631em;
      position: absolute;
      top: -0.327em;
      left: -0.53em;
      color: #c6c2c1;
    }
    /* 1.3.1 Typefaces */
    @font-face{
      font-family:'FontAwesome';
      src:url('typefaces/fontawesome-webfont.eot?v=3.2.1');
      src:url('typefaces/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),
      url('typefaces/fontawesome-webfont.woff?v=3.2.1') format('woff'),
      url('typefaces/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),
      url('typefaces/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
      font-weight:normal;
      font-style:normal
      }

Examples and source code

icon-food

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

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

icon-food

icon-food

icon-food

icon-food

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

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

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

CSS3 animations aren't supported in IE8 - IE9.

icon-food on icon-check-empty
icon-food on icon-circle
icon-foodl on icon-sign-blank
icon-ban-circle on icon-food

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