Font Awesome icon usage statistics

  • 12 types of Font Awesome iconic font are used and found 45 times in total.
  • MAWAJU.DE used 3.8 Font Awesome classes per each class in average.
  • Font Awesome usage statistics of MAWAJU.DE are based on first landing page and within top 1M websites only. Click the font icon to see all websites using it.
  • MAWAJU.DE includes "http://www.mawaju.de/assets/styles/8bceba7e965e6d1dfc79fb5c60bffe88libs.css" to use Font Awesome and information from CSS is like below.
  • @font-face {font-family: 'ChameleonSketch-Hatch';src: url('../font/2C3324_0_0.eot');src: url('../font/2C3324_0_0.eot?#iefix') format('embedded-opentype'),url('../font/2C3324_0_0.woff') format('woff'),url('../font/2C3324_0_0.ttf') format('truetype');}
    /*! normalize.css v1.1.2 | MIT License | git.io/normalize */
    /* ==========================================================================
       HTML5 display definitions
       ========================================================================== */
    /**
     * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
     */
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    nav,
    section,
    summary {
        display: block;
    }
    /**
     * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
     */
    audio,
    canvas,
    video {
        display: inline-block;
        *display: inline;
        *zoom: 1;
    }
    /**
     * Prevent modern browsers from displaying `audio` without controls.
     * Remove excess height in iOS 5 devices.
     */
    audio:not([controls]) {
        display: none;
        height: 0;
    }
    /**
     * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
     * Known issue: no IE 6 support.
     */
    [hidden] {
        display: none;
    }
    /* ==========================================================================
       Base
       ========================================================================== */
    /**
     * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
     *    `em` units.
     * 2. Prevent iOS text size adjust after orientation change, without disabling
     *    user zoom.
     */
    html {
        font-size: 100%; /* 1 */
        -ms-text-size-adjust: 100%; /* 2 */
        -webkit-text-size-adjust: 100%; /* 2 */
    }
    /**
     * Address `font-family` inconsistency between `textarea` and other form
     * elements.
     */
    html,
    button,
    input,
    select,
    textarea {
        font-family: sans-serif;
    }
    /**
     * Address margins handled incorrectly in IE 6/7.
     */
    body {
        margin: 0;
    }
    /* ==========================================================================
       Links
       ========================================================================== */
    /**
     * Address `outline` inconsistency between Chrome and other browsers.
     */
    a:focus {
        outline: thin dotted;
    }
    /**
     * Improve readability when focused and also mouse hovered in all browsers.
     */
    a:active,
    a:hover {
        outline: 0;
    }
    /* ==========================================================================
       Typography
       ========================================================================== */
    /**
     * Address font sizes and margins set differently in IE 6/7.
     * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
     * and Chrome.
     */
    h1 {
        font-size: 2em;
        margin: 0.67em 0;
    }
    h2 {
        font-size: 1.5em;
        margin: 0.83em 0;
    }
    h3 {
        font-size: 1.17em;
        margin: 1em 0;
    }
    h4 {
        font-size: 1em;
        margin: 1.33em 0;
    }
    h5 {
        font-size: 0.83em;
        margin: 1.67em 0;
    }
    h6 {
        font-size: 0.67em;
        margin: 2.33em 0;
    }
    /**
     * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
     */
    abbr[title] {
        border-bottom: 1px dotted;
    }
    /**
     * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
     */
    b,
    strong {
        font-weight: bold;
    }
    blockquote {
        margin: 1em 40px;
    }
    /**
     * Address styling not present in Safari 5 and Chrome.
     */
    dfn {
        font-style: italic;
    }
    /**
     * Address differences between Firefox and other browsers.
     * Known issue: no IE 6/7 normalization.
     */
    hr {
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        height: 0;
    }
    /**
     * Address styling not present in IE 6/7/8/9.
     */
    mark {
        background: #ff0;
        color: #000;
    }
    /**
     * Address margins set differently in IE 6/7.
     */
    p,
    pre {
        margin: 1em 0;
    }
    /**
     * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
     */
    code,
    kbd,
    pre,
    samp {
        font-family: monospace, serif;
        _font-family: 'courier new', monospace;
        font-size: 1em;
    }
    /**
     * Improve readability of pre-formatted text in all browsers.
     */
    pre {
        white-space: pre;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    /**
     * Address CSS quotes not supported in IE 6/7.
     */
    q {
        quotes: none;
    }
    /**
     * Address `quotes` property not supported in Safari 4.
     */
    q:before,
    q:after {
        content: '';
        content: none;
    }
    /**
     * Address inconsistent and variable font size in all browsers.
     */
    small {
        font-size: 80%;
    }
    /**
     * Prevent `sub` and `sup` affecting `line-height` in all browsers.
     */
    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }
    sup {
        top: -0.5em;
    }
    sub {
        bottom: -0.25em;
    }
    /* ==========================================================================
       Lists
       ========================================================================== */
    /**
     * Address margins set differently in IE 6/7.
     */
    dl,
    menu,
    ol,
    ul {
        margin: 1em 0;
    }
    dd {
        margin: 0 0 0 40px;
    }
    /**
     * Address paddings set differently in IE 6/7.
     */
    menu,
    ol,
    ul {
        padding: 0 0 0 40px;
    }
    /**
     * Correct list images handled incorrectly in IE 7.
     */
    nav ul,
    nav ol {
        list-style: none;
        list-style-image: none;
    }
    /* ==========================================================================
       Embedded content
       ========================================================================== */
    /**
     * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
     * 2. Improve image quality when scaled in IE 7.
     */
    img {
        border: 0; /* 1 */
        -ms-interpolation-mode: bicubic; /* 2 */
    }
    /**
     * Correct overflow displayed oddly in IE 9.
     */
    svg:not(:root) {
        overflow: hidden;
    }
    /* ==========================================================================
       Figures
       ========================================================================== */
    /**
     * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
     */
    figure {
        margin: 0;
    }
    /* ==========================================================================
       Forms
       ========================================================================== */
    /**
     * Correct margin displayed oddly in IE 6/7.
     */
    form {
        margin: 0;
    }
    /**
     * Define consistent border, margin, and padding.
     */
    fieldset {
        border: 1px solid #c0c0c0;
        margin: 0 2px;
        padding: 0.35em 0.625em 0.75em;
    }
    /**
     * 1. Correct color not being inherited in IE 6/7/8/9.
     * 2. Correct text not wrapping in Firefox 3.
     * 3. Correct alignment displayed oddly in IE 6/7.
     */
    legend {
        border: 0; /* 1 */
        padding: 0;
        white-space: normal; /* 2 */
        *margin-left: -7px; /* 3 */
    }
    /**
     * 1. Correct font size not being inherited in all browsers.
     * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
     *    and Chrome.
     * 3. Improve appearance and consistency in all browsers.
     */
    button,
    input,
    select,
    textarea {
        font-size: 100%; /* 1 */
        margin: 0; /* 2 */
        vertical-align: baseline; /* 3 */
        *vertical-align: middle; /* 3 */
    }
    /**
     * Address Firefox 3+ setting `line-height` on `input` using `!important` in
     * the UA stylesheet.
     */
    button,
    input {
        line-height: normal;
    }
    /**
     * Address inconsistent `text-transform` inheritance for `button` and `select`.
     * All other form control elements do not inherit `text-transform` values.
     * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
     * Correct `select` style inheritance in Firefox 4+ and Opera.
     */
    button,
    select {
        text-transform: none;
    }
    /**
     * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
     *    and `video` controls.
     * 2. Correct inability to style clickable `input` types in iOS.
     * 3. Improve usability and consistency of cursor style between image-type
     *    `input` and others.
     * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
     *    Known issue: inner spacing remains in IE 6.
     */
    button,
    html input[type="button"], /* 1 */
    input[type="reset"],
    input[type="submit"] {
        -webkit-appearance: button; /* 2 */
        cursor: pointer; /* 3 */
        *overflow: visible;  /* 4 */
    }
    /**
     * Re-set default cursor for disabled elements.
     */
    button[disabled],
    html input[disabled] {
        cursor: default;
    }
    /**
     * 1. Address box sizing set to content-box in IE 8/9.
     * 2. Remove excess padding in IE 8/9.
     * 3. Remove excess padding in IE 7.
     *    Known issue: excess padding remains in IE 6.
     */
    input[type="checkbox"],
    input[type="radio"] {
        box-sizing: border-box; /* 1 */
        padding: 0; /* 2 */
        *height: 13px; /* 3 */
        *width: 13px; /* 3 */
    }
    /**
     * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
     * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
     *    (include `-moz` to future-proof).
     */
    input[type="search"] {
        -webkit-appearance: textfield; /* 1 */
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box; /* 2 */
        box-sizing: content-box;
    }
    /**
     * Remove inner padding and search cancel button in Safari 5 and Chrome
     * on OS X.
     */
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }
    /**
     * Remove inner padding and border in Firefox 3+.
     */
    button::-moz-focus-inner,
    input::-moz-focus-inner {
        border: 0;
        padding: 0;
    }
    /**
     * 1. Remove default vertical scrollbar in IE 6/7/8/9.
     * 2. Improve readability and alignment in all browsers.
     */
    textarea {
        overflow: auto; /* 1 */
        vertical-align: top; /* 2 */
    }
    /* ==========================================================================
       Tables
       ========================================================================== */
    /**
     * Remove most spacing between table cells.
     */
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    /*
     * HTML5 Boilerplate
     *
     * What follows is the result of much research on cross-browser styling.
     * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
     * Kroc Camen, and the H5BP dev community and team.
     */
    /* ==========================================================================
       Base styles: opinionated defaults
       ========================================================================== */
    html,
    button,
    input,
    select,
    textarea {
        color: #222;
    }
    body {
        font-size: 1em;
        line-height: 1.4;
    }
    /*
     * Remove text-shadow in selection highlight: h5bp.com/i
     * These selection rule sets have to be separate.
     * Customize the background color to match your design.
     */
    ::-moz-selection {
        background: #b3d4fc;
        text-shadow: none;
    }
    ::selection {
        background: #b3d4fc;
        text-shadow: none;
    }
    /*
     * A better looking default horizontal rule
     */
    hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #ccc;
        margin: 1em 0;
        padding: 0;
    }
    /*
     * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
     */
    img {
        vertical-align: middle;
    }
    /*
     * Remove default fieldset styles.
     */
    fieldset {
        border: 0;
        margin: 0;
        padding: 0;
    }
    /*
     * Allow only vertical resizing of textareas.
     */
    textarea {
        resize: vertical;
    }
    /* ==========================================================================
       Chrome Frame prompt
       ========================================================================== */
    .chromeframe {
        margin: 0.2em 0;
        background: #ccc;
        color: #000;
        padding: 0.2em 0;
    }
    /* ==========================================================================
       Author's custom styles
       ========================================================================== */
    /* ==========================================================================
       Helper classes
       ========================================================================== */
    /*
     * Image replacement
     */
    .ir {
        background-color: transparent;
        border: 0;
        overflow: hidden;
        /* IE 6/7 fallback */
        *text-indent: -9999px;
    }
    .ir:before {
        content: "";
        display: block;
        width: 0;
        height: 150%;
    }
    /*
     * Hide from both screenreaders and browsers: h5bp.com/u
     */
    .hidden {
        display: none !important;
        visibility: hidden;
    }
    /*
     * Hide only visually, but have it available for screenreaders: h5bp.com/v
     */
    .visuallyhidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    /*
     * Extends the .visuallyhidden class to allow the element to be focusable
     * when navigated to via the keyboard: h5bp.com/p
     */
    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }
    /*
     * Hide visually and from screenreaders, but maintain layout
     */
    .invisible {
        visibility: hidden;
    }
    /*
     * Clearfix: contain floats
     *
     * For modern browsers
     * 1. The space content is one way to avoid an Opera bug when the
     *    `contenteditable` attribute is included anywhere else in the document.
     *    Otherwise it causes space to appear at the top and bottom of elements
     *    that receive the `clearfix` class.
     * 2. The use of `table` rather than `block` is only necessary if using
     *    `:before` to contain the top-margins of child elements.
     */
    .clearfix:before,
    .clearfix:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }
    .clearfix:after {
        clear: both;
    }
    /*
     * For IE 6/7 only
     * Include this rule to trigger hasLayout and contain floats.
     */
    .clearfix {
        *zoom: 1;
    }
    /* ==========================================================================
       EXAMPLE Media Queries for Responsive Design.
       These examples override the primary ('mobile first') styles.
       Modify as content requires.
       ========================================================================== */
    @media only screen and (min-width: 35em) {
        /* Style adjustments for viewports that meet the condition */
    }
    @media print,
           (-o-min-device-pixel-ratio: 5/4),
           (-webkit-min-device-pixel-ratio: 1.25),
           (min-resolution: 120dpi) {
        /* Style adjustments for high resolution devices */
    }
    /* ==========================================================================
       Print styles.
       Inlined to avoid required HTTP connection: h5bp.com/r
       ========================================================================== */
    @media print {
        * {
            background: transparent !important;
            color: #000 !important; /* Black prints faster: h5bp.com/s */
            box-shadow: none !important;
            text-shadow: none !important;
        }
        a,
        a:visited {
            text-decoration: underline;
        }
        a[href]:after {
            content: " (" attr(href) ")";
        }
        abbr[title]:after {
            content: " (" attr(title) ")";
        }
        /*
         * Don't show links for images, or javascript/internal links
         */
        .ir a:after,
        a[href^="javascript:"]:after,
        a[href^="#"]:after {
            content: "";
        }
        pre,
        blockquote {
            border: 1px solid #999;
            page-break-inside: avoid;
        }
        thead {
            display: table-header-group; /* h5bp.com/t */
        }
        tr,
        img {
            page-break-inside: avoid;
        }
        img {
            max-width: 100% !important;
        }
        @page {
            margin: 0.5cm;
        }
        p,
        h2,
        h3 {
            orphans: 3;
            widows: 3;
        }
        h2,
        h3 {
            page-break-after: avoid;
        }
    }
    /*
     * jQuery FlexSlider v2.2.0
     * http://www.woothemes.com/flexslider/
     *
     * Copyright 2012 WooThemes
     * Free to use under the GPLv2 license.
     * http://www.gnu.org/licenses/gpl-2.0.html
     *
     * Contributing author: Tyler Smith (@mbmufffin)
     */
    /* Browser Resets
    *********************************/
    .flex-container a:active,
    .flexslider a:active,
    .flex-container a:focus,
    .flexslider a:focus  {outline: none;}
    .slides,
    .flex-control-nav,
    .flex-direction-nav {margin: 0; padding: 0; list-style: none;}
    /* FlexSlider Necessary Styles
    *********************************/
    .flexslider {margin: 0; padding: 0;}
    .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
    .flexslider .slides img {width: 100%; display: block;}
    .flex-pauseplay span {text-transform: capitalize;}
    /* Clearfix for the .slides element */
    .slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
    html[xmlns] .slides {display: block;}
    * html .slides {height: 1%;}
    /* No JavaScript Fallback */
    /* If you are not using another script, such as Modernizr, make sure you
     * include js that eliminates this class on page load */
    .no-js .slides > li:first-child {display: block;}
    /* FlexSlider Modified Default Theme
    ***************************************/
    .flexslider { position: relative; zoom: 1; }
    .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
    .loading .flex-viewport { max-height: 300px; }
    .flexslider .slides { zoom: 1; }
    /* Direction Nav */
    .flex-direction-nav { *height: 0; }
    .flex-direction-nav a  { display: block; width: 40px; height: 60px; margin: -30px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; line-height: 56px; cursor: pointer; color: #ffffff; }
    .flex-direction-nav .flex-prev { left: 20px; }
    .flex-direction-nav .flex-next { right: 20px; text-align: right; }
    .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { color: #00000; }
    .flex-direction-nav .flex-disabled { opacity: 0 !important; filter:alpha(opacity=0); cursor: default; }
    .flex-direction-nav a:before  { font-size: 80px; display: inline-block; }
    /* Control Nav */
    .flex-control-nav { display: table; width: 100%; position: absolute; bottom: 0; padding: 0 !important; }
    .flex-control-nav li { display: table-cell;}
    .flex-control-paging li a { width: 100%; height: 10px; display: block; background: #000000; filter:alpha(opacity=0); background: rgba(0,0,0,0); cursor: pointer; text-indent: -9999px; font-size: 1px; line-height: 1px;}
    .flex-control-paging li a:hover { background: #000000; filter:alpha(opacity=100); }
    .flex-control-paging li a.flex-active { background: #000000; filter:alpha(opacity=100); cursor: default; }
    /* FontAwesome v3.2.1 extended */
    @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-chevron-right

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

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

icon-chevron-right

icon-chevron-right

icon-chevron-right

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

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

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

CSS3 animations aren't supported in IE8 - IE9.

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