Using FontAwesome with CSS

Question

Following the advice I found via Google, I have the following SCSS, the fonts exist in the directory specified, and FontAwesome is used elsewhere successfully with the i tag.

What am I doing wrong here as a literal keeps appearing in my html?

@font-face {
    font-family: "FontAwesome";
        src: url('/fonts/fontawesome-webfont.eot'),
            url('/fonts/fontawesome-webfont.svg'),
            url('/fonts/fontawesome-webfont.ttf'),
            url('/fonts/fontawesome-webfont.woff');
}

$fa-exclamation-triangle: "&#xf071;";

.form-error
{
    color:red !important;
    font-weight: bold;
    padding-top: 3px;
    font-family: "FontAwesome";


    &:before
    {
        content: $fa-exclamation-triangle;
    }
}

input.error
{
    font-weight: normal;
    background: $validation-red;
    color: black;
}

C3roe · Accepted Answer · 2014-01-26 20:12:13Z

1

What am I doing wrong here as a literal keeps appearing in my html?

I assume you mean the generated content shows as literally ?

Well, CSS does not know named entities, so unless your CSS was embedded into the HTML document directly (which from the preprocessor syntax I assume it’s not), this named entity does not get resolved as such, and is meant literally at this point.

The CSS notation for including unicode characters is \0xxxx, with xxxx being the hexadecimal character code.

answered Jan 26, 2014 at 20:12

C3roe

97.6k15 gold badges100 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using FontAwesome with CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related