web-dev-qa-db-ja.com

素晴らしいフォントにアイコンが表示されない

Font Awesomeを使用していますが、HTTPでCSSを追加したくありません。 Font Awesomeをダウンロードしてコードに追加しましたが、Font Awesomeにはアイコンの代わりに枠付きの四角形のボックスが表示されています。ここに私のコードがあります：

<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
   <i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>

枠付きの四角いボックスの代わりにアイコンを表示する方法を知りたい。

htmlcssfont-awesome
69
Ganesh

私の場合、CSSコードで次の間違いを犯しました。

*{
    font-family: 'Open Sans', sans-serif !important;
}

これにより、ページ全体のすべてのフォントファミリルールが上書きされます。私の解決策は、コードをそのように本体に移動することでした。

body{
    font-family: 'Open Sans', sans-serif;
}

注意：cssで!importantフラグを使用すると、同じ要素で同じタイプで宣言された他のcssルールがオーバーライドされます。

66
Daniel Barde

font-awesome.min.cssを開くと、次のパスが表示されます。

'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...

つまり、ディレクトリFontsを作成してから、ファイルfontawesome-webfont.ttf（fontawesome-webfont.woff、fontawesome-webfont.eot）をこのフォルダーにコピーする必要があります。その後、すべてが正常に動作するはずです。

46
user2980426

フォントawesomeの新しいバージョン（5）は、"fas"プレフィックスの代わりに"fab"または"fa"を使用することに注意してください。

彼らのウェブサイトから引用：

Faプレフィックスはバージョン5で廃止されました。新しいデフォルトは、ブランドのfasソリッドスタイルとfabスタイルです。

これが私のフォントが空白の正方形を表示していた理由です。修正されました。

サンプルコード：

<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>

参照： https://fontawesome.com/icons/facebook-f?style=brands

25
Krisztina

最初に、class = "fa"およびアイコンのクラスが何であることを確認します。だから、だけでなく

<i class="fa-pencil" title="Edit"></i>

だけでなく

<i class="fa fa-pencil" title="Edit"></i>

その後、期待どおりに動作します。これで問題が解決しました。

20
OneMoreQuestion

以下のようなコードがあるfont-awesome.cssを開きます。

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

次のようなフォルダが必要です。

font awesome -> css
 -> fonts

または最も簡単な方法：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
19
Erga Kandly

CSSファイルへのパスが正しいことを確認してください。絶対リンクを好むのではなく、どこから始まるのかがわかっているので理解しやすく、検索エンジンも相対リンクよりも好むでしょう。帯域幅を削減するには、フォントの素晴らしいサーバーからのリンクを使用します。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css">

さらに、それを使用する場合は、追加のフォントをサーバーにアップロードする必要はありませんであり、正しいCSSファイルを指していることを確認でき、最新の更新プログラムをすぐに利用できます。

10
Valentin Mercier

最初は、font-awesome.cssandfont-awesome.min.cssの両方を持ってはいけません

一般的に、開発中にfont-awesome.cssを使用し、サイトに満足したらfont-awesome.min.cssに切り替えます。

このような問題は多くの場合、相対パスと場所が原因で発生するため、htmlファイルがcssに関連する場所を確認してください。

Htmlファイルがベースディレクトリにあり、CSSがルートのサブフォルダーにある場合は、href="./css/font-awesome.css"（単一のピリオド）が必要です。

3
paul

上記はすべて正しいですが、その上、私の問題は、次のものを持たない無料バージョンのFA5をダウンロードしたことです。

font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')

V5を動作させることができなかったので、上記の投稿の助けを借りて4.7.0に戻し、問題を修正しました。

2
Mickers

CDNとjavascript includeを使用してFont Awesomeを正常にインストールしました（ このページ で説明）。次に、HTMLとCSSを古いページにコピーしようとすると、アイコンの代わりに空の四角いボックスが突然表示されました。

ダニエルの答え（上記）を見て、私の古いCSSファイルが巨大（そして何年も前）だったので、それが問題だと思った。ただし、Chrome DevToolsを見ると、Font Awesomeがロードされているように見えました。

Screenshot of CSS for Font Awesome Icon

問題がある場合、フォントを取り消し線で表示することを期待していました...しかし、すべてのオプションを使い果たしたため、計算スタイルを確認し、Font Awesomeフォントが確実に使用されていないことを明確に確認しました。 （下部のレンダリングされたフォントを参照してください）

Font Awesome not being used

私のレガシーのCSSファイルはめちゃくちゃだったので、触れないほうがいいので、これをすることでだまされました-誰にも言わないでください:)

<a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a>

また、Font Awesomeバージョン4.7.0からバージョン5.4.1にアップグレードすると、この問題はなくなりました。 このセットアップガイド とこのHTMLを使用しました

<a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>
2
Dagmar

私の場合：font-awesome.min.cssファイルだけでなく、プロジェクトのcssフォルダーにfont-awesomeフォルダー全体をコピーする必要があります。

1
sst

font-awesome-4.xで、fontsフォルダーをWebアプリフォルダーに追加します。

0
Saeed Hassanvand

MacOS Mojaveでは、Safariでこの問題が発生しました。フォントが素晴らしい画像はChromeで機能しましたが、Safariでは機能しなかったため、サイトではないと確信しました。

Safariメニューの[基本設定]に移動し、[プライバシー]タブの[クロスサイトトラッキングを禁止する]を無効/オフにして、レンダリングできるようにしました。

なぜこれが修正されたのかはわかりませんが、修正されました。

0
Michael Shulman
You needed to close your `<link />` 
As you can see in your <head></head> tag. This will solve your problem

<head>
    <link rel="stylesheet" href="../css/font-awesome.css" />
    <link rel="stylesheet" href="../css/font-awesome.min.css" />
</head>
0
Ronnie Web

Cssフォルダーのようにルートフォルダーにfontsフォルダーがないと思います。

デモ

enter image description here

そしてCSSフォルダは次のようなものです

enter image description here

そして、フォントフォルダのような

enter image description here

私はそれがあなたのために働くことを望みます。

ありがとうございます。

0
Obaidul Haque

VCS（gitなど）を使用してアイコンファイルをサーバーに転送した可能性があります。 gitより：

warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.

おそらく、フォントを修正する必要があります。

0
rishta

したがって、style='font-weight:normal;'を追加するか、そうでなければ要素のフォントを直接変更すると、Font AwesomeのCSSファイルの.fas{font-weight:900}定義がオーバーライドされます。フォントは、それが機能するフォントファイル内で特定の定義を持っていると思います。 font-weightは501〜1000の間に設定する必要があります。そうしないと、フォントが正方形のブロックのように見える場合があります。

0
James Wilkins