Font-AwesomeのアイコンはBootstrapcdnを介してレンダリングされません

StackOverflow https://stackoverflow.com//questions/22002238

  •  20-12-2019
  •  | 
  •  

質問

私はBootstrapcdnリンクを介してfont-awesomeアイコンフォントを使いようとしています。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
.

私はこのリンクを私のHTMLファイルの<head>部分に置き、この単純なHTMLコードを扱うようにしようとしています。

<!DOCTYPE html>
<html>
<head>
    <title>Font-Awesome Icons</title> 
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
    <p><i class="fa fa-camera-retro"></i> Camera Icon<i class="fa fa-facebook"></i> Facebook Icon</p>
</body>
</html>
.

しかしそれはレンダリングされていません。このコードは、Firefox（27）、Safari（7）とChrome（33）の最新バージョンでこのコードを試しました。 faクラスが各アイコンにあることを確認しました。このビデオでコードを実装しました。 http://headwaythemes.com / using-font-awesome-with-headway / （ワードプレスのテーマを意味していましたが、コードは同じように機能しますが）、スタックオーバーフローではなく、 fontawesome 私の問題を解決するのに役立ちました。

私はfontawesome.otfがインストールされていませんが、確かにそれはを訪問するときにグリフを見ることができるならばそれほどそれほどそれはそうではありません。 http://fortawesome.github.io 。
私は将来の全体のウェブサイトと共にフォント素晴らしいファイルをダウンロードしてホストするだけでよいので、Boostrapcdnリンクの更新についても心配する必要はありませんか？ - いくつかのアイコンを使用する予定であっても？

役に立ちましたか？

解決

ロードされていない理由は、URIが "//"で始まっているためです。これはそれがプロトコル相対パスであることを意味します。つまり、ページを使用しているプロトコルは何でも使用します。HTMLをローカルに開くと、ブラウザはプロトコルとして file を使用します。したがって、 "file：//"を使用してfont-awesome cssにアクセスしようとします。ローカルまたはリモートのHTTP Webサーバーを使用してHTMLにアクセスすると、 HTTP プロトコルを使用してページにアクセスして、「http：//」を使用してCSSにアクセスします。

解決策：

  1. CSSのパスを変更するか、ローカルマシンに模倣します。
  2. ローカルまたはリモートのHTTPサーバを実行してページにアクセスします。

    3. 詳細については： 2つのスラッシュから始めて...どのように振る舞いますか？

他のヒント

これに対処するためのこのような簡単な方法 - CDN行の前に 'http：'を追加するだけで、それはあなたの地元のマシン、すなわちこのように機能します：

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

Ta-DAA！

答えたのは絶対に正しいです。クイックローカルサーバーを作成したい場合は、HTMLページとCSSページのディレクトリに移動してから、端末に移動して -

を入力してください。

$ Python -m SimpleHTTPServer

それでは、あなたのブラウザに行き、127.0.0.1：8000に進みます 表示されない場合は、Webサイトのホームページをindex.html

に変更してみてください。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top