253

だから私はマーケティングページのプロトタイプを作成しようとしていて、Bootstrapと新しいFontAwesomeファイルを使用しています。問題は、アイコンを使おうとすると、ページに表示されるのは大きな正方形だけであるということです。

これが私が頭にファイルを含める方法です:

<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>

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

4

43 に答える 43

201

クラスと、目的のアイコンをfa識別するクラスの 2 つのクラスが必要です。fa-twitterfa-search

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

<!-- Correct -->
<i class="fa fa-search"></i>
于 2014-02-16T20:19:01.607 に答える
156

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

于 2013-01-16T19:29:50.200 に答える
73

これを使って

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

Amazon Cloudfront CDN で同様の問題が発生しましたが、maxcdn からの読み込みを開始すると解決しました

于 2014-09-17T09:21:35.983 に答える
23

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;
}

@font-face 宣言ブロックでパスを編集する以外は、CSS と同じです。

@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;
}
于 2013-01-16T19:35:32.770 に答える
13

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

<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">   
于 2015-04-08T07:23:00.820 に答える
6

MavenApache Wicketを使用している場合は、Font-Awesome とアイコンが読み込まれない問題を解決するために、次のことも確認してください。

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

/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)フォント ファイルを正しくロードできるようにするために、Package Resource Guard を正しく使用していますか?

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

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

}

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

特に 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 つのリソース セットを宣言する必要があります。最初のリソース セットはフィルタリングするファイルを定義し、もう 1 つのリソース セットは変更せずにコピーするファイルを定義します..."

于 2013-03-25T09:37:36.620 に答える
5

font-weight: 900;

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

Github ページの問題リファレンスは次のとおりです。https://github.com/FortAwesome/Font-Awesome/issues/11946

于 2019-05-03T22:43:21.383 に答える
4

これは、新しいバージョン 3.0 ではより簡単になるはずです。Bootstrap CDN を指定するのが最も簡単です: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome

于 2013-01-18T01:32:17.947 に答える
4

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

于 2015-07-28T14:50:49.897 に答える
3

サーバーが IIS の場合は、.woff ファイル拡張子を提供する正しい MIME を追加してください。正しいMIMEはapplication/octet-stream

于 2013-05-23T08:21:26.250 に答える
3

私は糸でダウンロードされたfont awesome 5で同じ問題を抱えていました.all.jsファイルと一緒にmin.cssファイルを追加しまし

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

<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>
于 2019-11-09T21:42:58.533 に答える
2

フォント パスが正しくない可能性があるため、css がフォントを読み込んでアイコンをレンダリングできないため、添付されたフォントの孤立したパスを提供する必要があります。

@font-face { 
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
于 2016-09-21T08:42:48.150 に答える
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 を追加する必要はありません

于 2015-08-11T17:43:20.103 に答える
1

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

@import "font-awesome-sprockets";

説明:

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

于 2014-09-03T00:40:46.090 に答える
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');
于 2013-11-01T18:59:09.300 に答える
0

私の問題は、

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

中に

<!-- build:css assets/styles/main.css -->
<!-- endbuild -->

鬼ごっこ

タグの外側に配置して修正しました。

于 2015-12-18T22:50:35.723 に答える
0

fontawesome 5 では、キャッシュされたバージョンの JS を Https 経由で配信できます。

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

https://fontawesome.com/get-started/svg-with-jsに関する詳細情報

于 2018-04-03T12:55:35.583 に答える
0

非常に多くの回答があるので、私の作業を追加します (PRO を使用しない場合は名前を変更してください):

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
  .lib-font-face(
    @family-name: @font-family-name__fontawsomeregular,
    @font-path: '@{baseDir}fonts/webfonts/fa-regular-400',
    @font-weight: 400,
    @font-style: normal
  );
  .lib-font-face(
    @family-name: @font-family-name__fontawsomelight,
    @font-path: '@{baseDir}fonts/webfonts/fa-light-300',
    @font-weight: 300,
    @font-style: normal
   );
  .lib-font-face(
    @family-name: @font-family-name__fontawsomebrands,
    @font-path: '@{baseDir}fonts/webfonts/fa-brands-400',
    @font-weight: normal,
    @font-style: normal
  );
  .lib-font-face(
    @family-name: @font-family-name__fontawsomesolid,
    @font-path: '@{baseDir}fonts/webfonts/fa-solid-900',
    @font-weight: 900,
    @font-style: normal
  );
}

_theme.less で

@import '../includes/fontawesome/fontawesome.less';
@fa-font-path: '@{baseDir}fonts/webfonts';

//  Fonts
@font-family-name__fontawsomeregular: 'Font Awesome 5 Pro';
@font-family-name__fontawsomelight: 'Font Awesome 5 Pro';
@font-family-name__fontawsomebrands: 'Font Awesome 5 Brands';
@font-family-name__fontawsomesolid: 'Font Awesome 5 Pro';

および使用例:

 .my-newclass:before{
     content: '\f002';
     display: inline-block;
     float: left;
     font-family:  @font-family-name__fontawsomelight;
     font-size: 16px;
}
于 2019-01-07T14:07:34.633 に答える
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">

ルートへのアクセスを引き続き禁止することにし、代わりにルート/font-awesome/ の Apache 構成に別のディレクトリ エントリを追加しました。

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>
于 2015-10-17T19:54:06.070 に答える
-1

今日、次の解決策を見つけました。

  1. プロジェクト全体を Githubページからダウンロードします
  2. 次に、ディレクトリをプロジェクトに移動し、.html ファイルの HEAD セクションにリンクを追加することについて、Default CSS セクションの下にあるページの残りの手順に従います。

彼らのドキュメントの問題は、font-awesome プロジェクト全体のコピーを取得してプロジェクトに配置する場所へのリンクを指定していないことです。

于 2014-02-25T23:38:56.697 に答える