Custom font not applied in :before pseudoelement in CSS

Question

I have problem with CSS content value. It’s not displayed at all, just codes, like in the picture. Can anyone explain what causes it? I’ll try to fix it, without posting code here.

HTML:

<a href="#"><i class="icon-map-marker"></i> Atlanta</a>

CSS:

.icon-map-marker:before{
    content: "\f041"
}

@font-face {
    font-family: 'FontAwesome';
    src: url('fontawesome-webfont.eot');
    src: url('fontawesome-webfont.eot') format('embedded-opentype'),
         url('fontawesome-webfont.woff?') format('woff'),
         url('fontawesome-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal
}

[class^="icon-"], [class*=" icon-"] {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    display: inline;
    width: auto;
    height: auto;
    line-height: normal;
    vertical-align: baseline;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    margin-top: 0
}

Answer 1

This is caused by the character not being defined in the font used to display it. A placeholder is displayed instead. In Font Awesome, the fa-map-marker character is on that position.

Clearly font-family: FontAwesome is not used for the :before pseudo-element. Either it is not set, the font is not available, or a browser bug is triggered. I assume that no other CSS rules are used (otherwise overriding somewhere in the cascade could take place).

font-family: FontAwesome not set?

:before is child of the element it is “before”, so it inherits font-family correctly. The parent has font-family: FontAwesome unless the rule is invalid, which is not the case. Therefore the problem is not here and it must be in the unavailability of the font.

To be absolutely sure, try changing your rule for :before to

.icon-map-marker:before {
    content: "\f041";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
}

and see if now the character displays OK.

FontAwesome font family not available?

Either the font cannot be downloaded, is broken, or the @font-face at-rule is invalid.

The at-rule seems perfectly valid to me. I’m just wondering, why the question mark after the WOFF path? I think this is a left-over after old IE (< 9) hack, but it should do no harm.

Checking the ability to download correct font file is up to you. You can verify that the font is loaded by sniffing the network traffic, e.g. using Firebug or LiveHTTPHeaders (but be sure to use your font and reload skipping cache via Ctrl + F5).

I think your problem is a browser bug. You did not specify what browser in which version you use, so I cannot say anything more specific.

To be always sure, you can use CSS from the CDN. Or follow the instructions on the same site to get Font Awesome working. You can also read more on bulletproof @font-face yourself, but then you need to keep up with the current implementation status of @font-face in browsers you want to support.

Quick test of fa-map-marker in :before using CSS from CDN

Insert this into your location bar:

javascript:'<title>Font Awesome test</title><link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/><style>body:before {font-family: FontAwesome; content: "\\f041";}</style>Atlanta'

The \\ is needed instead of \ inside JavaScript string. The string is a valid HTML5 document.

Side notes

U+F041 is a character from range reserved for private use. Consequentially different fonts may have different characters for this code point.

Maybe it would be better to use more classes instead of the two-in-one. Using icon and map-marker could both simplify your selectors and tell you that your classes could be more semantic. Using a CSS preprocessor could let you compose the more semantic class city of lower, purely presentational units.

Your HTML markup is terrible. It is awfully bent to serve your presentational requirements, but HTML should mark up the structure that is presentation-agnostic. Why don’t you use <a href="#" class="icon-map-marker">Atlanta</a>?

Answer 2

may be its a cache issue on your browser, try adding version numbers next to file name.

@font-face {
font-family: 'FontAwesome';
src: url('fontawesome-webfont.eot?v1');
src: url('fontawesome-webfont.eot?v1') format('embedded-opentype'),
     url('fontawesome-webfont.woff?v1') format('woff'),
     url('fontawesome-webfont.ttf?v1') format('truetype');
font-weight: normal;
font-style: normal

}