FontAwesomeアイコンが表示されない。どうして？

123

最近、私はこのウェブサイトを開発していて、それにフォントの素晴らしいアイコンを入れようとしているので、スケーラブルです。

問題は、彼らが現れていないことです。

HTMLを見てください。

<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>

または

<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>

私はスタイルシートのリファレンスを頭に入れました。

なぜ表示されないのかわかりません。

ここに参照があります：

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

よし、これが完全なhtmlだ。

<head>
    <meta charset="UTF-8">
    <title>Retrica</title>
    <link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <link href="style/normalize.css" rel="stylesheet" type="text/css">
    <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="style/main.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header class="top-header">
        <div class="container"><!-- Start Container -->
            <div class="row"><!-- Start Row -->
                <div class="span3"><!-- Start Span3 -->
                    <div class="logo"><img src="img/Retrica.@2x.png" alt="" width="67px" height="13,5px"></div>
                </div><!-- End Span3 -->
                <div class="span9"><!-- Start Span9 -->
                    <nav class="main-nav">  <!-- Start Nav -->

                        <a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
                        <ul class="nav-ul"> <!-- Start Unordered List -->
                            <li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
                            <li><a href="#"><span class="fa fa-mobile-phone fa-2x"></span> Contact Us</a></li>

                        </ul> <!-- End Unordered List -->
                    </nav><!-- End Nav -->
                </div><!-- End Span9 -->
            </div><!-- End Row -->
        </div><!-- End Container -->
    </header>

    <section>

        <a href="#" class="btncta">Register Now</a>
    </section>

</body>
html  css  font-awesome 
— ルイス・バルデス
ソース
1
私には問題なく動作します：jsfiddle.net/ZF7x4
— Shahar
— チロSantilli郝海东冠状病六四事件法轮功
1
font-awesomeの別のバージョンを試してください。たとえば、バージョン4.3.0では一部のアイコンが表示されませんでしたが、4.7.0では表示されました。
— Almir Campos
stackoverflow.com/a/55977898/4874281を確認してください。誰かのお
— 役に立てば幸い

回答:

105

あなたの参照の下で、あなたはこれを持っています：

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

具体的にはそのhref=部分。

しかし、あなたの完全なhtmlの下にはこれがあります：

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

これになるようにあなたの完全なHTMLで置き換えsrc=てみましたhref=か？

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

私のために働く：http : //codepen.io/TheNathanG/pen/xbyFg

— NathanG
ソース
10
注：一部の回は、あなたが、あなたが同じフォルダにCSSやフォントファイルを持っていることをダブルチェック、チェック、空のボックスが表示される場合があり、これを、希望は誰かに役立ちます。
— Shaijut
104

font-awesomeアイコンがない人のために、いくつかのアイデアを集めました。

  • 次のようなCDNへの正しいリンクを使用していることを確認してください。

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

  • ページでHTTPSを使用している場合、HTTPSを使用してfont-awesome CSSにリンクしていますか（上記のリンクで置き換えhttp://てhttps://ください）。

  • AdBlock PlusまたはuBlockが有効になっていないことを再確認してください。一部のアイコンがブロックされている可能性があります。

  • ブラウザのキャッシュをリセットします。（Chromeでは、再読み込みボタンをクリックして、ハードキャッシュリセットを選択します）

  • 使用する<span>または<i>要素がFontAwesomeフォントファミリーを使用していることを確認してください。たとえば、それだけではありません

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

    だが

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

    CSSに次のようなものがある場合は機能しません。

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

  • IE8を使用している場合、HTML5 Shimを使用していますか？

  • これでうまくいかない場合は、Font Awesome Wikiにトラブルシューティングのアイデアがあります。

— mxro
ソース
3
追加します：.htaccessがttf、svg、eot、またはwoff拡張機能をブロックしていないことを確認してください
— BassMHL
フォントの上書き！これについて言及する回答は多くありません。私はチェックし、チェックし、チェックし、最終的にそれを理解しました。私も過去にこの問題に遭遇したことがあり、その理由はわかりませんでしたが、今ではわかります。
— adrianmc 2016
1
fa最初にシングルをクラス名として追加するのに失敗しました。ありがとう。問題を段階的に見つけるための完璧な答え。
— Kai Noack
私にとっては、フォントファミリを設定する別の方法でした
— levininja '30
私には「font-weight：500」がありました（使用しているテーマと一致させるため）。私はそれを "font-weight：bold"に設定しなければなり
— ませんでした
24

最初は、これをFont Awesome 5で動作させることができませんでした。

<i class="fa fa-sort-down"></i>

だから私はここに来て、フォントの素晴らしさに慣れていない。そのため、さらに調べてみると、私の問題はバージョンの問題にすぎないことに気づきました。

この場合、w3schoolsが役に立ちました。

Font Awesome 5の新機能はfas接頭辞で、Font Awesome 4はを使用しfaます。

のsはsolidをfas表し、一部のアイコンには、プレフィックスを使用して指定された通常モードもあり ます。far

FontAwesome cssフォルダーにある次のような異なるファイルにすでに気づきました。

  • all.min.css
  • brands.min.css
  • fontawesome.min.css
  • regular.min.css
  • solid.min.css

そして、そのとき私は自分の間違いに気づきました。私がしなければならなかったすべてはhtmlに適切なCSSを含めることでした：

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">

次に、正しいアイテムを参照します。

<i class="fas fa-sort-down"></i>

この設定でうまくいきます。すべてのアイテムに各タイプの同等物があるわけではありませんが。これは機能しません：

<i class="far fa-sort-down"></i>

ちなみに、別のファイルをすべて参照したくない場合は、これで十分です。

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">
— ルアードファンエルブルグ
ソース
さらに、チートシートには、各アイコンタイプで使用できるアイテムが表示されます。
— Ruard van Elburg
12

私が使っていたFAバージョンでリリースされていないアイコンが欲しかったので、鉱山は機能しませんでした。

これは、一部のアイコンが表示され、他のアイコンが表示されない理由を答えています。

かなり明白ですが、一部の人々はまだこれに陥っていると思います。私のような。

— タイグアラアンドラーデ
ソース
4
はい、質問に対する回答を提供します。
— Bobort
2
または、使用しているバージョンに存在しない古いフォントを使用しようとしています。これは、たとえば、古い名前であるtimes-circle-oではなく、単にtimes-circleと呼ばれます。fontawesome.com
— v4.7.0
1
ありがとうございました！！これは私が一日の私の髪を引っ張る作り続けてきた
— 24時間365日の
5

maxcdn.bootstrapcdn.comにはhttpsを使用する必要があります。CORSをサポートするmaxcdnのhttpsのみ

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" />
— チャチャワンウォンシリプラサート
ソース
4

FontsディレクトリをCSSファイルと同じレベルに置くことで、この問題を解決しました。

— ロロ
ソース
3

2018年にこれをチェックアウトしている可能性のある方へ。私はfont awesome 4.7.0を使用sしfasており、コードに示されているようにin を取り出すだけでこの問題を解決しました<i class="fa fa-[icon-name]"></i>。これはもともと<i class="fas fa-[icon-name]"></i>。

お役に立てれば。

— グッドラックレオ
ソース
さらに、node.jsサーバーを実行しています。
— Goodluck Leo 2018
Font Awesome 5の新機能はfasプレフィックスで、Font Awesome 4はfaを使用します。w3schools
— Ruard van Elburg
2

fontawesomeの更新に関して、上記の回答にいくつかの情報を追加するだけです。

Font awesome 5を使用している場合

a。以下のHTMLをコピーして貼り付けるだけです。

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

注：すべてのスクリプトを内<body> {YOUR_SCRIPT_HERE}</body>および直前（YOUR_CLOSING_BODY）に含めることをお勧めします

b。そして、例えば、

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>
— Sundar Gsv
ソース
faウェブサイトにリンクする代わりに、ローカルでCSSを提供するのはどうですか？
— Ghilteras
これは私のケースでした...私はjsファイルを持っていませんでしたが、今はうまくいきます！
— クリスティアンセプルベダ
2

これを追加すると私のために働きました：

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">

見てください

だから完全な例は：

<link href="https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/css/fontawesome.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Compute <i class="fa fa-calculator"></i></a>
スニペットを展開

— edgarmtze
ソース
2

カスタムCSSを定義する場合は、font-weight: 900;（バージョン5以降の）新しいFont Awesomeライブラリを設定する必要があります。このフォントの太さを設定しないと、四角が表示される場合があります。

— ジュレフ
ソース
2

ノート

この回答は、fontawesomeの最新バージョンがv5。*である場合に作成されますが、yarnおよびnpmバージョンはv4。*（21.06.2019）を指します。つまり、パッケージマネージャーを介してインストールされたバージョンは最新リリースよりも遅れています！

font-awesomeパッケージマネージャー（ヤーンまたはnpm）を使用してインストールした場合は、インストールされているバージョンに注意してください。または、すでにfont-awesomeかなり前にインストールしている場合は、インストールされているバージョンを確認してください。

新しい依存関係としてfont-awesomeをインストールする：

$ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ font-awesome@4.7.0
info All dependencies
└─ font-awesome@4.7.0
Done in 3.32s.

すでにインストールされているfont-awesomeのバージョンを確認します。

$ yarn list font-awesome
yarn list v1.16.0
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ font-awesome@4.7.0
Done in 0.79s.

問題

font-awesome依存関係をインストールした後、これら2つのソースファイルの1つを組み込むか、font-awesome.cssまたはfont-awesome.min.css（で作成node_modules/font-awesome/css/）をWebページのヘッダーに組み込みます。

<head>
  <link type="text/css" rel="stylesheet" href="css/font-awesome.css">
</head>

次に、https：//fontawesome.com/にアクセスします。無料のアイコンを選択し、サインインアイコンを検索します（例として）。たとえば<i class="fas fa-sign-in-alt"></i>、アイコンをコピーして、htmlに貼り付けた場合、アイコンが表示されないか、正方形または長方形として表示されます。

解決

本質的に、パッケージマネージャーを介してインストールされたバージョンは、 https：//fontawesome.com/ Webサイトにます。ご覧のとおりfont-awesome v4.7.0、インストールされていますが、ウェブサイトにはのドキュメントが表示されていfont-awesome v5.*ます。解決策v4.7.0 ：https://fontawesome.com/v4.7.0のアイコンが記載されたWebサイトにアクセスし、適切なアイコンをコピー<i class="fa fa-sign-in" aria-hidden="true"></i>して、htmlに組み込みます。

— ルカシュ・ディノウスキー
ソース
彼らはここで最新バージョンの新しいパッケージをリリースしました。lessおよびsassとの互換性もあります\ o /
— DerpyNerd
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">

fontawesome.cssファイルにはフォント参照が含まれていません。

— ライブラブ
ソース
1

ブロガーホスティングを使用している場合は、次のURLスタイルシートcssを使用します。

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
— Nurdin BM。
ソース
1

以下の2つのリンクをヘッダータグに保持してみてください。

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

以下のリンクからアイコンを取得する：

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css">
— チェリー
ソース
1

私が使う：

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<a class="icon fa-car" aria-hidden="true" style="color:white;" href="http://viettelquangbinh.com"></a>

後のスタイル：

.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
— トラン・アン・ヒエン
ソース
1

あなたが投稿したCDNリンクが正しく表示されなかった理由だと思います。以下のリンクを使用できます。これは私にとっては完全に機能します。

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
スニペットを展開

— ジョン・ケシュ・マフグ
ソース
0

relを含めて、awesomefont cssファイルへのリンクに「rel = "stylesheet" type = 'text / css'」のように入力してください。これらがないと、ファイルが正しく読み込まれませんでした。

— エリオット・ロバート
ソース
0

素晴らしいフォントのディレクトリにある.htaccessファイルにこれを追加できます

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/woff .woff
AddType font/woff .woff2
AddType font/otf .svg

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>
— ワリード・ハキム
ソース
0

私はテストし、それは働いています。

これの代わりに

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

HTTPSで使用する

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
— アティフタリク
ソース
-1

フォントインポーターが必要です。| 試す

<style> 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>
— SIAMWEBSITE
ソース
-2

私はメインのfont-awesome.cssファイルを編集することで仕事をしました。srcへのURL（woff、eotなど...）があります。これらを絶対パスに変更する必要がありました。例：http ://mywebsite.com/font-awesome.woffうまくいき ました

— crystallove18
ソース
2
外部ファイルを編集しているので、これはお勧めしません。あなた（またはあなたのチーム）は、fontawesomeを更新する必要があるたびに、これを覚えておく必要があります。
— J Cordero
-6

これを変える：

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

これに：

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

私はあなたが必要だと信じています http:そうでなければそれが使用するプロトコルを知らない（そしてfile:結果として間違ったものを使用するなど）。

— シャハール
ソース
@ user3870894実はhref、JavaScriptを考えていました。しかし、新しいコードを試してください。
— Shahar 14
@ user3870894 o_o次に、完全なHTMLまたは少なくとも主要部分を投稿します。コンソールは何と言っていますか？要素を調べてみましたか？
— Shahar 2014
2
@Shahar //ブラウザを使用することにより、要求元サイトが使用しているプロトコルを選択します。サイトでhttpsを使用している場合、httpsが選択されます。httpを使用している場合は、httpを使用してCDNからファイルを要求します。もちろん、を使用してローカルでサイトを開くfile:///と（推奨されません）、ブラウザは実際にfileプロトコルでcdnを開こうとします。
— Robin van Baalen、2015年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.