FontAwesomeアイコンが表示されません。どうして？
最近私はこのウェブサイトを開発していて、その中に素晴らしいアイコンのフォントを入れようとしているので、スケーラブルです。
問題は、彼らが現れていないということです。
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/[email protected]" 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>
<h1>The greatest way to contact those you love</h1>
<h3>In a way you don't imagine</h3>
<a href="#" class="btncta">Register Now</a>
</section>
</body>
あなたの参照の下で、あなたはこれを持っています：
<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">
フォントが素晴らしいアイコンが見つからないという人のために、いくつかアイデアをまとめました。
次のように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を使って素晴らしいフォント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にさらに トラブルシューティングのアイデア があります。
私が使っていたFAバージョンではリリースされていないアイコンが欲しかったので、Mineは機能していませんでした。
これはなぜいくつかのアイコンが表示されますが他のアイコンは表示されないのに答えます。
かなり明白ですが、私は何人かの人々がまだこれに陥ると思います。私のような。
Maxcdn.bootstrapcdn.comにはhttpsを使用する必要があります。 maxcdn上のhttpsのみがCORSをサポートします
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" />
2018年にこれをチェックしているかもしれません。私は素晴らしいフォント4.7.0を使っていて、コード<i class="fa fa-[icon-name]"></i>のようにsのfasを取り出すことでこの問題を解決しました。これはもともと<i class="fas fa-[icon-name]"></i>でした。
お役に立てれば。
これを追加すると私のために働いた：
<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>私はCSSファイルと同じレベルにFontsディレクトリを置くことによってこの問題を解決しました。
ブロガーホスティングを使用している場合は、次のURLスタイルシートCSSを使用してください。
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
最初はこれがうまくいかなかったFont Awesome 5：
<i class="fa fa-sort-down"></i>
これが私がここに来た理由で、素晴らしいフォントに慣れていないためです。だから私がさらに調べると、私は自分の問題がそのバージョンの問題にすぎないことに気づいた。
w3schools はこの場合私を助けてくれました。
Font Awesome 5の新機能は
fas接頭辞です。FontAwesome 4はfaを使用します。
fas内のsはsolidを表し、アイコンによっては通常モードもあり、接頭部farを使用して指定します。
私はすでにFontAwesome cssフォルダの中の異なるファイルに気づいていました。
- all.min.css
- brand.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">
あなたがカスタムCSSを定義するならば、あなたはいくつかの新しいFont Awesomeライブラリ（バージョン5から）のためにfont-weight: 900;をセットしなければなりません。このフォントウェイトを設定しないと、正方形が表示される場合があります。
あなたが投稿したCDNリンクは、それが正しく表示されなかった理由であると思います、あなたは以下のこれを使うことができます、それは私のために完璧に働きます。
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">All.min.cssファイルを使用してFont Awesomeを機能させることができました。
以下の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">
私はテストしました、そしてそれは働いています。
これの代わりに
<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">
あなたは素晴らしいフォントのディレクトリの.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>
私が使う：
<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);
}
Awesomefontのcssファイルへのリンクの "rel =" stylesheet "type = 'text/css'"のようにrelとtypeを含めるようにしてください。これらがなければ、ファイルは私のために正しくロードされていませんでした。
バージョン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ファイルにはフォント参照が含まれていません。
Fontawesomeのアップデートに関して、上記の回答にさらに情報を追加するだけで、
あなたが素晴らしいフォント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>
ノート
fontawesome の最新バージョンがv5。*であるが、 yarn および-の場合、この回答が作成されます npm バージョンはv4。*（21.06.2019）を指します。つまり、パッケージマネージャーを介してインストールされたバージョンは、最新リリースよりも遅れています！
パッケージマネージャーを介してfont-awesomeをインストールした場合（ yarn または npm ）、インストールされているバージョンに注意してください。または、font-awesomeをかなり以前にインストールした場合は、インストールされているバージョンを確認してください。
font-awesomeを新しい依存関係としてインストールする：
$ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
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.
└─ [email protected]
Done in 0.79s.
問題
font-awesome依存関係をインストールした後、これら2つのソースファイルfont-awesome.cssまたはfont-awesome.min.css（node_modules/font-awesome/css/に設立）のいずれかをheaderあなたのウェブページの.
<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をインストールしましたが、Webサイトにはfont-awesome v5.*のドキュメントが表示されています。解決策は、v4.7.0https://fontawesome.com/v4.7. のアイコンが記載されているWebサイトにアクセスし、適切なアイコンをコピーします。 <i class="fa fa-sign-in" aria-hidden="true"></i>をHTMLに組み込みます。