web-dev-qa-db-ja.com

CDNを使用せずにフォント4.1のローカルファイルを含める方法

With font awesome effect これはすごいフォントの効果です。すごいフォント4.1 CDNを使用している場合にのみ取得できます）

enter image description here ダウンロードしたファイルを使用して、fontsフォルダーとfont-awesome.cssを含めましたが、アイコンは表示されません。

enter image description here 正しい私のリンク。

enter image description here font-awesome.cssファイルパス、私は何も変更しませんでした。

enter image description here ディレクトリのフォルダとファイル。

enter image description here フォントフォルダ内。

enter image description here cssフォルダー内。

***************************************************** ***************************************************** *****************************
問題はすでに解決しています。これは、コードの入力ミスによるものです。 fontawesome v3.1スタイルで入力する

 <i class="icon-Twitter-sign icon-x3"></i>

そして今、私はv4.1を使用しています、それはそれが機能しなかった理由です。そのはず

 <i class="fa fa-Twitter icon-x3"></i>

それを機能させるために。

htmlcsstwitter-bootstrapfonts
24
user3066033
  1. Webサイトからfontawesomeパッケージをダウンロードします。
  2. Fontawesome.cssファイルがあるパッケージを抽出します。
  3. このファイルをcssディレクトリにコピーします
  4. 抽出されたfontawesomeパッケージからすべてのフォントファイルをフォントフォルダーにコピーします。
  5. 最後に、cssファイルのそれぞれの場所を指定して、fontawesome.cssをHTMLページに追加します。

そして出来上がり！

32
Sithira

Cssをダウンロードしてファイルにリンクするだけでは意味がありません。cssファイルを調べてください。

あなたはすべてのフォントスタイルが保存されているフォントフォルダをダウンロードしていません...だからそれをダウンロードして、システム上にあるフォントファイルへのパスを与えてください..

Cdnリンクからフォントをダウンロードし、fontsフォルダーに保存します。

bootstram font awesome

これがあなたのために働くことを願っています。

11
Srinivas08

お気に入りのブラウザの開発者向けオプションを使用すると、ファイルが機能しない理由がわかります。

Font awesomeには、付属のフォントファイルが必要です。 CSSファイルはこれらを参照し、それらを含めることを試みますが、現在それらを見つけることができません。

FontAwesome からfont-awesome-4.1.0.Zipをダウンロードします

次に、これを抽出し、cssおよびfontsフォルダーをプロジェクトに配置します。その後、ファイルを次のように参照できます。

<link href="css/font-awesome.min.css" rel="stylesheet">
6
Joshua Griffiths

FontAwesome V5.3.1を使用しているため、このバージョンではフォルダー構造が少し変更されたため、この回答を更新したいと思います。

  1. まず、 FontAwesome v5.3.1 をダウンロードし、フォルダーを抽出します。
  2. all.min.cssファイルをCSSフォルダーから取得し、スタイルシートに追加します。
  3. 次に、FontAwesome抽出からwebfontsフォルダーをコピーし、プロジェクトの1つ上のディレクトリにall.min.cssファイル。 （下の画像を参照）

enter image description here

all.min.cssファイルはwebfontsフォルダーを参照しています。このファイルをwebfontsフォルダーとともに追加する必要があります。

src: url("../webfonts/fa-brands-400.eot"); // This is how it is been referred now in all.min.css file.

ありがとうございました。

3
Balasubramani M

.htaccessを使用している場合、css以外のeot＆woffファイルへの相対リンクを確保することが重要です。

1）ダウンロードしたZipファイルを目的のディレクトリに抽出します

.htaccessパスが

H：\ virtualhost\.htaccess

そしてfontawesome cssとfonts pathは

H：\ virtualhost\fontawesome-free-5.4.2-web\css

H：\ virtualhost\fontawesome-free-5.4.2-web\webfonts

2）.htaccessに次のエントリを作成します

RewriteRule ^ css /（[^ /] *）。css $ /fontawesome-free-5.4.2-web/css/$1.css [L]

RewriteRule ^ webfonts /（[^ /] *）。eot $ /fontawesome-free-5.4.2-web/webfonts/$1.eot [L]

RewriteRule ^ webfonts /（[^ /] *）。woff2 $ /fontawesome-free-5.4.2-web/webfonts/$1.woff2 [L]

RewriteRule ^ webfonts /（[^ /] *）。woff $ /fontawesome-free-5.4.2-web/webfonts/$1.woff [L]

3）htmlの先頭部分に以下を追加します

http：// local-ip-address：port/css/all.css

0
vivek shirodkar
  1. Fontawesomeのダウンロード（font-awesome-4.7.0）： http://fontawesome.io/get-started/
  2. そのまま解凍して、プロジェクトにコピーします。
  3. HTMLリファレンスでfont-awesome.min.css例：<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
0
CKuharski