8

This is undoubtedly me doing something really dumb, but I can't see it. I'm trying to use FontAwesome as a font-family in my css, but it doesn't seem to be working.

With 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 is showing up as clearly Times New Roman.

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

@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 the .. to assets gives an obvious error that it can't find the font, so I'm pretty sure the relative pathing is just fine and dandy. If I change it to font-family: FontAwesome,Arial;, it uses Arial. Clearly, it can't find FontAwesome and I don't know why.

Any particular reason why I'm not able to change my body font to FontAwesome?

4

7 に答える 7

8

これを使用する方がはるかに優れています：

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

}

それ以下でも、それ以上でもありません:)）））

于 2014-01-20T18:40:43.597 に答える
7

.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>
于 2015-02-17T06:36:35.137 に答える
2

スタイル名に「before」という単語を追加するまで、これを機能させることができませんでした。それは私のためにそれを修正しました！

.myClass:before {
    font-family: FontAwesome;
    content: "\f024";
}
于 2016-02-18T04:23:09.013 に答える
0

あなたは間違って書いています：font-family: FontAwesome;

このように書いてください。font-family:'FontAwesome';

私は1か月前に同じ問題を抱えていたので、これはあなたに役立つと思います。

于 2013-03-15T13:52:07.983 に答える
0

答える必要がある最初の質問は、使用している Web ブラウザーです。すべてのブラウザがカスタム フォントをサポートしているわけではありません。一部はそうですが、余分にハッキングされた CSS/HTML が必要です。

最初に Chrome でテストすることをお勧めします (最適なフォント サポートがあるようです)。

于 2013-03-15T11:47:59.883 に答える