在CSS中使用FontAwesome

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: "";

.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;
}

Answer 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.