Geek asks and answers

FontAwesome not available as font family?

This, of course, I am doing something really stupid, but I do not see it. I am trying to use FontAwesome as a font family in my css, but it doesn't seem to work.

With a minimal code, I have:

<head>
    <link href="assets/css/font-awesome.css" rel="stylesheet">
    <style>
        body {
            font-family: FontAwesome;
        }
    </style>
</head>
<body>
    Test FontAwesome!
</body>

This manifests itself clearly as Times New Roman.

The FontAwesome font itself is stored in assets / font /, and font-awesome.css has the following @font-face:

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

Changing ..to assetsgives an obvious error that it cannot find the font, so I'm sure the relative path is just fine and dandy. If I change it to font-family: FontAwesome,Arial;, it uses Arial. It is clear that he cannot find FontAwesome, and I do not know why.

Any specific reason why I cannot change my body font to FontAwesome?

+7
9

, - . , , fonts font.

Yovav (fooobar.com/questions/1144460/...) (. ), , , , , .

, "remote" font-face cdn ( , , )

// Swap http for https if required.

@font-face {
    font-family: "FontAwesome";
    font-weight: normal;
    font-style : normal;
           src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
           src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}
+7

:

<head>

<!-- fonts awesome -->

<link href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'>

</head>

, :

#post-title a:before {

    font-family: FontAwesome;
    content: "\f0c4";

}

, :))))

+6

, .woff .woff2 ...

web.config :

<staticContent>
  <remove fileExtension=".woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
+6

, "" . !

.myClass:before {
    font-family: FontAwesome;
    content: "\f024";
}
+1

, , - , . . , CSS/HTML.

Chrome (, ).

0

: font-family: FontAwesome;

, . font-family:'FontAwesome';

, , .

0

FontAwesome - , Unicode, , , .

Give it a try &#xF00C;.

0
source

I had a similar problem, debugging the font family showed that font-famiy was overridden by this stupid code ...

body, h1, h2, h3, h4, p, span, button, select {
    font-family: 'Meta-Normal', sans-serif !important;
}
0
source

This works for solid icons, but how do I get the “regular” versions?

0
source

More articles:


All Articles