Font Awesomeが機能せず、アイコンが四角で表示される

224

だから私はマーケティングページのプロトタイプを作ろうとしていて、Bootstrapと新しいFont Awesomeファイルを使っています。問題は、アイコンを使用しようとすると、ページにレンダリングされるすべてが大きな四角形になることです。

ここでは、ファイルをヘッドに含める方法を示します。

<head>
        <title>Page Title</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/app.css">
        <!--[if IE 7]>
            <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
        <![endif]-->
</head>

そして、これがアイコンを使おうとする私の例です：

<i class="icon-camera-retro"></i>

しかし、すべてが大きな正方形でレンダリングされます。誰かが何が起こっているのか知っていますか？

css  html  twitter-bootstrap  font-awesome 
— コナーブラック
ソース
1
フォントをインポートしていますか？
— Mayhewr 2013年
1
おそらく違います。.cssファイルを含めるだけでよいと思いました。
— Connor Black
2
タイトルは、問題がChromeに固有であることを示しています。他のブラウザに読み込まれていますか、それとも参照されているフォントファイルが404になっていますか？
— cimmanon 2013年
1
2016年8月の時点で上記のリンクにステップ3が見つかりません...リダイレクトはありますか？
— Saurabh Tiwari
1
おそらくあなたはwebfontフォルダをコピーするのを忘れましたか？
— 全体的に2018

回答:

149

ドキュメント（ステップ3）によると、サイトのフォントの場所を指すように、提供されたCSSファイルを変更する必要があります。

— Mayhewr
ソース
5
すばらしい回答です。いくつかの追加情報を提供するために、cssによって提供されるデフォルトのパスにフォントを配置することもできます。Font-awesome.cssを開くだけで、次のエントリが見つかります。@ font-face {font-family： 'FontAwesome'; src：url（ '../ font / fontawesome-webfont.eot？v = 3.2.1'）; src：url（ '../ font / fontawesome-webfont.eot？＃iefix＆v = 3.2.1'）
— Braulio
1
同じ問題が発生する将来のASP.NET MVCリーダーの場合：すべてのフォルダーが正しい場所にある場合は、web.configファイルにMIMEタイプを追加したかどうかを確認してください（stackoverflow.com/questions/4015816/…）。
— jpgrassi 2014
1
フォントのbase64バージョンでData URIスキームを使用する場合（オンラインで簡単に変換できます）、適切なファイルパスとリソースホスティングについて心配する必要はありません。
— RenaissanceProgrammer
注：cssを変更したくない場合は、cssとフォントを同じフォルダに入れてください。これを
— shaijut
7
@tutuca：誰もがCDNを使用できるわけではありません。
— オービットのライトネスレース
188

あなたは2クラス、持っている必要がありますfaクラスと目的のアイコンを識別し、クラスfa-twitter、fa-searchなどを...

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>
— ナビル・カディミ
ソース
4
これがトップの答えになるはずです。CSSは、フォントファイルを移動しない限り、フォントファイルの適切な場所を指します。これにより、壁を
— 押し上げ
5
注：「faプレフィックスはバージョン5で廃止されました。新しいデフォルトは、ブランドのfasソリッドスタイルとfabスタイルです。」
— Terje Solem
1
これで解決しました！私はPrimengと一緒にAngular（5だと思います）を使用していますが、font-awesomeはすでにxx.component.ts内のMenuItem-definitions（アイコンが正しくレンダリングされているなど）で既に機能しているようです。ただし、何かをxx.component.htmlに追加する場合（たとえば、アイコン付きのpボタン）、faクラスと fa- <whatever icon> を追加する必要があります。
— イゴール
1
@TerjeSolemあなたが提供した情報は非常に重要です。それは私の問題を解決しました。古いバージョンを使用していたが、「fas」のおかげで使用していたため
— MindRoasterMir
🤦‍♂️ありがとうございます！私は同じアイコンをoi oi -...で取得しました。
— Alexandr
54

これを使って 

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

Amazon Cloudfront CDNで同様の問題がありましたが、maxcdnからロードを開始した後に解決されました

— クマーディーパム
ソース
6
これは、font-awesomeのCDNを使用することを前提としています。商業生産環境では、これを行いません。
— ジェイエドワーズ
48

これは役立つ場合があります。アイコンのフォントファミリーを誤って変更していないことを確認してください。.faアイテムのフォントファミリーをFontAwesomeから変更した場合、アイコンは表示されません。それは常にばかげて小さいものです。

それが誰かを助けることを願っています。

— ブレン1818
ソース
11
ビンゴ！本当にありがとう。Metro-UIはfont-awesome font-familyをオーバーライドしていました。これを追加する必要がありました：.fa {font-family： 'FontAwesome'！重要; その後、それは働いた。
— デビーA
1
うん。愚かで小さい。これ-他のフォントを変更してfontawesomeアイコンに影響を与えることは、私に何度も起こり、愚かになってきました。
— Edd
2
はい-この行が原因でした（より具体的には、！重要なルール）：* {font-family： 'Source Sans Pro'！important}
— Svet
1
これは、Font Awesomeを使用して、問題を見つけるのに時間を無駄にしないための最も重要で役立つヒントです。
— Dez
22

LESSまたはSASSを使用している場合は、font-awesome.less / sassファイルを開き@fa-font-path: "../font";、実際のフォントを指すパス変数を編集します。

@fa-font-path: "../font";

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

CSSと同じですが、@ font-face宣言ブロックでパスを編集します。

@font-face {
  font-family: 'FontAwesome';
  src: url('your/path/fontawesome-webfont.eot?v=3.0.1');
  src: url('your/path/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('your/path/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('your/path/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}
— ジョンシュリンケルト
ソース
すべてではなく特定のアイコンのみをインポートする方法はありますか？私のcssファイルをいくつかのアイコンにコンパイルしたいだけです。
— user805981 2015年
@fa-font-path: "../fonts";私のために働いた。（欠落していることに注意してくださいs）
— プログラハンマー2016年
18

font-awesome.cssのTheresコードを開きます。

@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">
— エルガ・カンドリー
ソース
13

以前のいくつかの解決策で同じ問題を解決しようとしましたが、私の状況ではうまくいきませんでした。最後に、これらの2行をHEADに追加しました。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
— ヴォイカン・クビヤノビッチ
ソース
12

使ってます Font Awesome 4.3.0 maxcdnからのリンクていますが、ここで述べたように機能します、

しかし、サーバー内のホストに、このように、私のために働いた同じフォルダにフォントとCSSを置きます

ここに画像の説明を入力してください

次に、CSSをリンクします。

<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />

誰かが役に立てば幸いです。

— Shaijut
ソース
8

fasクラスとfaクラスの2つのクラスが必要です。おそらくこれでうまくいきます。

// Wrong
<i class="fas fa-search"></i>    

// Correct
<i class="fa fa-search"></i>
— イスラエル
ソース
3
これに気づかなかった-v5 fab以降、fasクラスではなくまたはクラスが必要になりましたfa。
— エシロン2018
7

私はこの問題を抱えていました。問題は、fontawesomeフォントをオーバーライドする重要なフォントファミリCSSスタイルがあったことです。

— ジョニー・ホワイト
ソース
同じ問題が* {font-family：Helvetica、sans-serif！important;にもありました。}
— ダボ2016
6

MavenとApache Wicketを使用している場合もフォント-素晴らしいとアイコンロードされていないとの問題を解決しようとするために、次のことを確認します。

たとえば、次のファイル構造にファイルを配置した場合

/src
 /main
  /java
   /your
    /package
     /css
      font-awesome.css
     /font
      fontawesome-webfont.eot
      fontawesome-webfont.svg
      fontawesome-webfont.svgz
      fontawesome-webfont.ttf
      fontawesome-webfont.woff

チェック1）フォントファイルを正しくロードできるように、パッケージリソースガードを正しく使用していますか？

WebApplicationを拡張するクラスの例：

@Override
public void init() {
    super.init();   
    get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());

}

チェック2）すべてのフォントがWebブラウザーに正しく転送されていることを確認したら、実際にWebブラウザーに転送されたもの、つまりフォントファイルの整合性が変更されたかどうかを確認します。たとえば、FirefoxのWeb開発ツールバーとDiffDog（ファイル比較用）を使用して、ソースディレクトリのファイルとWebブラウザに転送されたファイルを比較します。

特にMavenを使用している場合は、リソースのフィルタリングに注意してください。/ fontファイルが含まれているフォルダはフィルタリングしないでください。フィルタリングすると、ファイルが破損します。

pom.xmlの例

<build>
    <finalName>Your project</finalName>
    <resources>
        <resource>
            <filtering>true</filtering>
            <directory>src/main/resources</directory>
        </resource>
        <resource>
            <filtering>false</filtering>
            <directory>src/main/java</directory>
            <includes>
                <include>**</include>
            </includes>
            <excludes>
                <exclude>**/*.java</exclude>
            </excludes>
        </resource>
    </resources>
</build>

上記の例では、cssおよびフォントファイルが含まれているフォルダーsrc / main / javaをフィルターしません。

バイナリデータのフィルタリングの詳細については、ドキュメントもご覧ください。

http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html

特に、ドキュメントでは次の警告が表示されます：「警告：画像などのバイナリコンテンツを含むファイルはフィルタリングしないでください。これにより、出力が破損する可能性が高くなります。テキストファイルとバイナリファイルの両方をリソースとして使用する場合は、相互に排他的な2つのリソースセットを宣言する必要があります。最初のリソースセットはフィルタリングするファイルを定義し、他のリソースセットは変更せずにコピーするファイルを定義します... "

— フィリップ
ソース
6

私はこの問題を抱えており、各ステップを慎重に通過しました...私が何年にもわたってFAを使用しているにもかかわらず...そして、私は自分のメールのcssファイルにこの行があることに気付きました：

* {
font-family: Arial !important;
}

ばかげた間違いですが、これは将来誰かに転倒する可能性があります！

— J Doe
ソース
4

これは、新しいバージョン3.0でははるかに単純になるはずです。最も簡単なのは、Bootstrap CDNをポイントすることです。http：//www.bootstrapcdn.com/？v = 01042013155511＃tab_fontawesome

— 素晴らしいフォント
ソース
4

フォントファイルのヘッダーAccess-Control-Allow-Originを*に戻す必要があります

— トロニック
ソース
2
丁度！サードパーティのプロバイダーを使用してフォントの素晴らしいファイルを提供しても問題は解決せず、他のプロバイダーに渡して解決してもらうだけです。
— Simanas
4

2018年12月の時点で、bootstrapcdnでホストされている安定したバージョン4.7.0を使用すると、ウェブサイトのfont-awesome 5.xx cdnの代わりに使用する方が簡単です。マイナーバージョンをアップグレードするたびに、以前のバージョンが壊れるからです。

<link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

アイコンは同じです：

<i class="fa fa-facebook"></i>
— エハシノム
ソース
3

font-weight: 900;

Font Awesome 5には別の問題がありました。FontAwesomeアイコンのデフォルトのfont-weightは900にする必要がありますが、spanおよびiタグの場合は400に上書きしました。私がそれを修正したとき、それはうまくいきました。

以下は、Githubページの問題のリファレンスです。https：//github.com/FortAwesome/Font-Awesome/issues/11946

誰かのお役に立てば幸いです。

— マニア人
ソース
1
それも私の問題でしたありがとう。Font-Familyを "Font Awesome 5 Free"に設定しましたが、font-weightも900に設定する必要がありました。
— Hans Vonn
3

バージョン5. *以降を使用している場合は、

all.cssまたはall.min.css

それはへの参照がないようfontawesome.cssが動作しませんを含むwebfontsをフォルダーへの参照がなく、@ font-faceまたはfont-family

これを調べるには、fontawesome.cssまたはfontawesome.min.cssでfont-familyプロパティのコードを検索します。

— the_haystacker
ソース
これは私にとって完璧な解決策でした-残念ながら答えははるかに下です。私はそれを見ていないので、自分で考えなければなりませんでした
— Cold_Class
2

フォントパスが正しくないため、cssがフォントをロードしてアイコンをレンダリングできないため、アタッチされたフォントの孤立したパスを提供する必要がある可能性があります。

@font-face { 
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
— SantoshK
ソース
2

バージョン5以降、このサイトからパッケージをダウンロードした場合：

https://fontawesome.com/download

フォントは、all.cssおよびall.min.cssファイルにあります。

これは、最新バージョンを使用した参照の外観です（フォルダーで置き換えてください）。

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">
— ライブラブ
ソース
2

解決策を見つけるのに苦労し、公式ドキュメントが役に立たなかった後、これは私のために問題を解決しました：

  1. Fontawesome.zipをダウンロードします。私はバージョン5.10.2を使用していますが、ここから入手できますhttps://fontawesome.com/download

  2. zipファイル内にはいくつかのフォルダーがあります。cssおよびwebfontsフォルダーのみが必要です ここに画像の説明を入力してください

    1. Webプロジェクトに2つのフォルダーを作成し、それらにcssおよびwebfontsという名前を付けます。 ここに画像の説明を入力してください

これらの名前は必須です。次に、CSSとWebフォントのコンテンツをzipからプロジェクトの対応するフォルダーにコピーします。そしてそれだけです！

fontawesomeに注意してください！素晴らしさは、ユーザーにとって物事をシンプルにすることです！

— ババニュー
ソース
1

3.2.1から4.0.1に変更しました。フォルダはフォントでしたが、現在はフォントと呼ばれています。

src：url（ '../ font / fontawesome-webfont.eot？v = 3.2.1'）;

src：url（ '../ fonts / fontawesome-webfont.eot？v = 4.0.1'）;

誰かのお役に立てば幸いです。

— アンドレドゥアルテ
ソース
1

Official Font Awesome SASS Ruby Gemを使用し、application.css.scssに次の行を追加してエラーを修正しました

@import "font-awesome-sprockets";

説明：

font-awesome-sprocketsファイルには、フォントファイルへの適切なパスを見つけるために使用されるsprockets assestヘルパーのSass関数が含まれています。

— マークラー
ソース
1

sassを使用しており、main.scssにインポートした場合 @import '../vendor/font-awesome/scss/font-awesome.scss';

エラーは、相対パスでフォントファイルを探しているfont-awesome.scssファイルが原因である可能性があります。

したがって、$ fa-font-path変数をオーバーライドすることを忘れないでください。 $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

このように、index.htmlにcdnを追加する必要はありません

— ビルスボレ
ソース
1

fontawesome-all.cssファイルを再確認します-一番下にwebfontsフォルダーへのパスがあります。Mineには "../webfonts"形式があり、cssファイルはその場所から1レベル上にあることを意味しました。すべてのcssファイルがcssフォルダーにあり、フォントを同じフォルダーに追加したため、これは機能しませんでした。

フォントフォルダを1つ上のレベルに移動するだけで、すべてが順調になります。

Font Awesome 5.0でテスト済み

— ロス
ソース
これは、古いドキュメントにリンクせずに質問に直接回答するため、推奨される回答です。功績
— カイルチャンピオン
1

私は、私がmin.cssファイルを追加して作った糸でダウンロードしたフォント素晴らしい5と同じ問題を抱えていたALONG all.jsファイルで。

これが誰かを助けることを願っています

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>
— エンリケ・マルティネス
ソース
1

/css/all.cssファイルには、コアスタイルと、Font Awesomeを使用するときに必要なすべてのアイコンスタイルが含まれています。/ webfontsフォルダーには、上記のCSSが参照し、依存するすべての書体ファイルが含まれています。

/ webfontsフォルダー全体と/css/all.cssをプロジェクトの静的アセットディレクトリ（またはフロントエンドアセットやベンダーのものを保持したい場所）にコピーします。

Font Awesomeを使用する各テンプレートまたはページのに、コピーした/css/all.cssファイルへの参照を追加します。

ご覧ください-https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself 答えが得られます。

— ディペッシュ・ショーハン
ソース
0

相対パスではなく絶対パスを使用することで解決しました。相対パスを使用していて（以下の最初の例を参照）、それが機能しませんでした。コンソールで確認したところ、サーバーから404が返され、ファイルが見つかりませんでした。

相対パスにより404が発生しました： 

@font-face { 
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}

絶対パスはブラウザ間でそれを解決しました：

@font-face { 
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}

必要がない限り、これを行うことはお勧めしませんが、私にとってはうまくいきます。もちろん、font-awesome.cssファイルのすべてのフォント形式について、これを繰り返す必要があります。

— ティム
ソース
0

Allow from none私のapache設定にルートディレクトリのディレクティブがあったため、私にはうまくいきませんでした。これが私がそれを機能させる方法です...

私のディレクトリ構造：

root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html

私のindex.htmlは次のとおりです：

<link rel="stylesheet" href="../font-awesome/4.4.0/css/font-awesome.min.css">

私は引き続きルートへのアクセスを許可しないことを選択し、代わりにroot / font-awesome /のApache構成に別のディレクトリエントリを追加しました 

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>
— user3325776
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.