Font Awesome 4 — Icon Override Guide

Font Awesome 4 renders every icon as the content of a CSS ::before pseudo-element on the <i> tag. The content value is a Unicode code point — for example \f05a for fa-info-circle — that maps to a glyph in the FontAwesome icon font. The glyph is painted in currentColor on a fully transparent background.

Because the icon is a glyph in a font file you can override any part of it with plain CSS: the content value (swap to a different glyph), font-size (scale), color, background, border, and the geometry of the host <i> element itself. No JavaScript, no SVG, no extra HTML elements required.

The key insight for the more advanced techniques is that several icons are composite glyphs — a container shape (circle, triangle) and an inner symbol drawn as a single character. By swapping the ::before content to the inner symbol’s standalone glyph and re-drawing the surrounding shape with CSS on the host element, you gain independent control over each layer’s color, fill, and border.

The color-flip technique targets composite icons — icons that combine a container shape (typically a circle) with an inner symbol as a single glyph. Common examples are .fa-info-circle, .fa-times-circle, and .fa-question-circle.

In the default rendering the entire glyph — circle outline and inner symbol together — is drawn in currentColor on a transparent background. The flip separates these two layers: the inner symbol is rendered by swapping the ::before content to a standalone glyph, and the circle is re-drawn independently using CSS border and border-radius: 50% on the host <i> element. Each layer can then be styled individually.

.fa-info-circle {

    display: inline-flex;
    /*
     * Switches the <i> from its FA default of inline-block to an
     * inline flex container so align-items / justify-content will
     * center the glyph inside the fixed-size box we are creating.
     */

    align-items: center;
    justify-content: center;
    /*
     * Centers the inner glyph both horizontally and vertically
     * within the element's declared width and height.
     */

    width: 25px;
    height: 25px;
    /*
     * Explicit equal dimensions give the container a fixed square canvas.
     * Without these, inline-flex collapses to the glyph's natural size
     * and border-radius: 50% cannot form a true circle.
     */

    border: 2px solid currentColor;
    /*
     * Draws the circle outline using a CSS border rather than relying on
     * the composite glyph. currentColor inherits from the element's own
     * color property, keeping the border in sync with the glyph color
     * without hard-coding a value.
     */

    border-radius: 50%;
    /*
     * Rounds all four corners into a circle.
     * Requires equal width and height to produce a perfect circle
     * rather than an ellipse.
     */

    box-sizing: border-box;
    /*
     * Includes the border width within the declared 25 x 25 px size.
     * Without border-box the border adds to the outside, making the
     * icon slightly larger than intended and misaligning it with
     * surrounding inline text.
     */

    background-color: transparent;
    /*
     * Transparent interior — the page background shows through the circle.
     * This is the "flipped" state: the areas that were opaque (the glyph)
     * are now a CSS border, and the areas that were transparent (the
     * background) remain transparent.
     *
     * Change to a solid color for the Inverted Fill variant (see Section 4).
     */

    vertical-align: middle;
    /*
     * Vertically aligns the inline-flex element with adjacent text.
     * Without this the icon sits on the text baseline and appears low.
     */

    opacity: 50%;
    /*
     * Optional: reduces the overall visibility of the icon uniformly.
     * Applies to both the border and the inner glyph.
     * Remove or adjust as required.
     */
}

    .fa-info-circle::before {

        content: "\f129";
        /*
         * \f129 is fa-info — the standalone lowercase "i" glyph,
         * without the surrounding circle that is part of \f05a
         * (the full fa-info-circle composite glyph).
         *
         * Swapping to \f129 prevents the font from drawing the
         * original circle, leaving only the "i" symbol. The circle
         * outline is now provided entirely by the CSS border on the
         * host <i> element set in Step 1.
         *
         * The ::before rule is indented one level under its parent to
         * visually communicate the parent–pseudo-element relationship
         * in plain (non-preprocessed) CSS files.
         */

        font-size: 14px;
        /*
         * Controls the size of the inner glyph independently of the
         * host container. Reduce if the symbol clips against the border;
         * increase for a bolder, more prominent icon.
         */

        line-height: 1;
        /*
         * Removes the extra line-height spacing that would otherwise
         * push the glyph off-center inside the flex container.
         */
    }

The inverted fill variant is the color-flip in reverse: the host element’s background-color becomes a solid color and the inner glyph is rendered in white (or another contrasting color). This produces a filled badge appearance rather than an outlined one. The CSS structure is identical to the flip technique — only background-color, color, and the absence of a border differ.

.fa-check-circle {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    box-sizing: border-box;
    vertical-align: middle;

    background-color: #1d6a3e;
    /*
     * Solid fill — replaces the transparent interior of the flip variant.
     * The glyph color below must contrast with this background so the
     * symbol remains legible.
     */

    color: #ffffff;
    /*
     * White glyph rendered on the green background — the visual inverse of
     * a green checkmark on a white background.
     * currentColor in the ::before glyph resolves to this value.
     */
}

    .fa-check-circle::before {

        content: "\f00c";
        /*
         * \f00c is fa-check — the standalone checkmark glyph, without the
         * surrounding circle that is part of \f058 (fa-check-circle).
         * The circle is now provided by background-color + border-radius
         * on the host element.
         */

        font-size: 13px;
        line-height: 1;
    }

/* COLOR FLIP — outlined circle, transparent interior
 * Use when you want a lightweight, outlined badge appearance. */
.fa-info-circle {
    border:            2px solid currentColor;  /* circle is a CSS border */
    background-color: transparent;             /* interior is open       */
    color:            currentColor;            /* glyph + border share color */
}

/* INVERTED FILL — solid background, contrasting glyph
 * Use when you want a filled badge that emphasizes status or action. */
.fa-check-circle {
    background-color: #1d6a3e;  /* circle is a CSS background  */
    color:            #ffffff;   /* glyph contrasts background  */
    /* no border needed — shape comes from border-radius alone */
}

Not every override requires the split-glyph technique. Icons that are a single, non-composite shape — such as .fa-exclamation-triangle, .fa-star, or .fa-bell — can be customized with just color, font-size, or opacity applied directly to the class selector. A ::before override is only needed when you are swapping the glyph itself.

.fa-exclamation-triangle {

    color: #c2770a;
    /*
     * Font Awesome glyphs are drawn in currentColor by default.
     * Setting color here overrides whatever the parent element provides.
     * No ::before rule is needed — the glyph color follows automatically.
     */

    font-size: 22px;
    /*
     * Scales the glyph up from the default inherited body font-size.
     * Font Awesome also ships helper classes (.fa-lg, .fa-2x, .fa-3x …)
     * but a direct font-size override gives finer-grained control.
     */

    vertical-align: middle;
    /*
     * Aligns the icon with adjacent inline text.
     * Use vertical-align: text-bottom for icons that should sit flush
     * with the bottom of a capital letter rather than optically centered.
     */
}

.fa-bell {

    opacity: 0.35;
    /*
     * Reduces the icon's visual weight uniformly — affects both the glyph
     * and any border or background set on the host element.
     * Use for "inactive" or "disabled" icon states where the icon should
     * remain present but visually recede.
     *
     * If you need to dim only the glyph while keeping a border at full
     * opacity, use a low-alpha color instead of opacity:
     *   color: rgba(28, 93, 143, 0.35);
     */
}

.fa-star {
    color: #f59e0b;  /* gold for the filled star */
}

.fa-star.is-empty::before {

    content: "\f006";
    /*
     * \f006 is fa-star-o — the outline (empty) star glyph.
     * The .is-empty modifier class is toggled by application logic.
     * This swaps the glyph from filled to outline without changing
     * the HTML markup — only the class on the <i> element changes.
     *
     * General pattern: add a modifier class to the <i> element and
     * target it here with a chained selector + ::before to swap any
     * icon state programmatically.
     */
}

Font Awesome’s base stylesheet sets rules on .fa and on each individual icon class (e.g. .fa-info-circle). Your overrides must have sufficient specificity to win over those rules without resorting to !important.

/* AVOID — changes the icon everywhere on the page */
.fa-info-circle {
    color: #c0392b;
}


/* PREFER — scoped to a specific component */
.alert-banner .fa-info-circle {
    color: #c0392b;
}


/* ALSO FINE — modifier class on the <i> element itself.
 * The double-class selector (.fa-info-circle.fa-info-circle--alert)
 * has higher specificity than a single class and is self-documenting. */
.fa-info-circle.fa-info-circle--alert {
    color: #c0392b;
}

/*
 * Font Awesome's own ::before rule always sets:
 *   font-family: FontAwesome;
 *
 * Because font-family is an inherited property, your ::before override
 * inherits FontAwesome from the host <i> element via the .fa class and
 * does NOT need to re-declare it — unless your project includes a global
 * reset that wipes ::before content or font-family (e.g., a broad *::before
 * { content: ""; } reset).
 *
 * If glyphs appear as empty boxes or question marks after your override,
 * add font-family explicitly to ::before as a diagnostic step:
 */
    .fa-info-circle::before {
        content:     "\f129";
        font-family: FontAwesome;  /* add if glyphs appear as empty boxes */
        font-size:   14px;
        line-height: 1;
    }

/*
 * In plain CSS files (no Sass / Less pre-processor), indent the ::before
 * rule one level under its host element rule. This visually communicates
 * the parent–pseudo-element relationship without nesting syntax:
 */
.fa-info-circle {
    display: inline-flex;
    /* ... host element rules ... */
}

    .fa-info-circle::before {
        content: "\f129";
        /* ... glyph rules ... */
    }

The table below lists the composite icons most commonly overridden with the split-glyph technique, their composite Unicode value, and the corresponding standalone inner-glyph Unicode value. Use the inner glyph value in ::before { content: "..." } when you want to draw the container shape independently with CSS.