web-dev-qa-db-ja.com

FontAwesomeはフォントファミリーとして利用できませんか？

これは間違いなく私が本当に馬鹿げたことをしていることですが、私はそれを見ることができません。私はCSSのフォントファミリーとしてFontAwesomeを使用しようとしていますが、機能していないようです。

最小限のコードで、私は持っています：

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

これは明らかにTimesNewRomanとして表示されています。

FontAwesomeフォント自体はassets/font /に保存され、font-awesome.cssには次の@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;
}

..をassetsに変更すると、フォントが見つからないという明らかなエラーが発生するため、相対パスは問題なくダンディであると確信しています。 font-family: FontAwesome,Arial;に変更すると、Arialが使用されます。明らかに、FontAwesomeが見つからず、その理由もわかりません。

ボディフォントをFontAwesomeに変更できない特別な理由はありますか？

cssfont-facefont-awesome
7
Depressio

相対パスをリストしていますが、スペルミスが原因で予期しない問題が発生する場合があります。 fontsの代わりにfontというフォルダを実際に持っているために、リンクを台無しにした回数を数えることはできません。

Yovavの回答（ https://stackoverflow.com/a/28556064/3616018 ）（下記）を試して、問題が解決するかどうかを確認します。解決しない場合は、代わりに絶対パスを使用するか、リンクが正しい。

ローカルのfont-faceで苦労している場合は、cdnを介して「リモート」font-faceを試すことができます（他のサイトからブラウザによってすでにキャッシュされているという利点があります）

// 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");
}
8
BlueEyesWhiteDragon

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

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

<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
Friede Petr

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

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

FontAwesome文字は、Unicodeの私用領域にのみ保存されるアイコンであるため、テキストでこれらの文字を使用しないと、フォントが表示されません。

&#xF00C;をお試しください。

0
MatTheCat

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

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

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

0
Sandeep Pattanaik

答える必要がある最初の質問は、どのWebブラウザを使用しているかです。すべてのブラウザがカスタムフォントをサポートしているわけではありません。いくつかはそうしますが、CSS/HTMLをさらにハックした場合のみです。

最初にChromeでテストすることをお勧めします（最高のフォントサポートがあるようです）。

0
Jacob