web-dev-qa-db-ja.com

素晴らしいフォントが機能しない、正方形として表示されるアイコン

だから私はマーケティングページを試作しようとしていると私はブートストラップと新しいFont Awesomeファイルを使用しています。問題は、アイコンを使用しようとすると、ページに表示されるのはすべて大きな四角形だということです。

ファイルを頭に含める方法は次のとおりです。

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

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

csshtml5twitter-bootstrapfont-awesome
182
Connor Black

documentation （ステップ3）に従って、あなたはあなたのサイト上のフォントの場所を指すように供給されたCSSファイルを修正する必要があります。

134
mayhewr

faクラスと、希望するアイコンを識別するクラスfa-Twitter、fa-searchなど、2つのクラスが必要です。

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

<!-- Correct -->
<i class="fa fa-search"></i>
169
Nabil Kadimi

これを使って

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

Amazon Cloudfront CDNについても同様の問題がありましたが、maxcdnからロードし始めた後に解決しました

39
Kumar Deepam

これは助けになるかもしれません、あなたが誤ってフォントファミリーを変更していないことを確認するためにチェックしてください。 .fa項目のフォントファミリーをFontAwesomeから変更した場合、アイコンは表示されません。それはいつも愚かで小さいものです。

誰かに役立つことを願っています。

32
Bren1818

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

CSSと同じですが、@ font-face宣言ブロックでパスを編集する点が異なります。

@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;
}
21
jonschlinkert

Font-awesome.cssを開くと、次のようなコードがあります。

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

次のようなフォルダが必要です。

font awesome -> css
             -> fonts

または最も簡単な方法：

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

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

<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">
12
Vojkan Cvijanovic

私はFont Awesome 4.3.0を maxcdnは動作します からリンクしているだけです here 、

しかし あなたのサーバのHostへ 同じフォルダにフォントとcssを置くことは私のためにこのように働いた

enter image description here

それからCSSをリンクしてください。

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

希望は誰かを助けます。

9
stom

私はこの問題を抱えていました。問題は私がフォントファミリーのCSSスタイルを持っていたということでした！フォントの素晴らしいフォントを上書きすることが重要です。

7
Jonny White

Maven および Apache 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開発者ツールバーとDiffDogを使用して（ファイル比較のために）比較します。

特にMavenを使用している場合は、リソースフィルタリングに注意してください。あなたの/フォントファイルが含まれているフォルダをフィルタリングしないでください - そうでなければそれらは破損するでしょう。

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

"Warning：画像のようなバイナリコンテンツを含むファイルをフィルタしないでください。これはおそらく破損した出力になるでしょう。あなたがリソースとしてテキストファイルとバイナリファイルの両方を持っているなら、宣言する必要があります。 2つの相互に排他的なリソースセット。最初のリソースセットはフィルタリングするファイルを定義し、もう一方のリソースセットは変更しないままコピーするファイルを定義します... "

6
Philipp

Fasクラスとfaクラスの2つのクラスが必要です。多分これでうまくいくでしょう：

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

// Correct
<i class="fa fa-search"></i>
6
israel

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

4
Font Awesome

私はこの問題を抱えていて、年齢を問わずFAを使ってきたにもかかわらず慎重に各ステップを踏み出しました。

* {
font-family: Arial !important;
}

愚かな間違いですが、これは将来誰かを悩ます可能性があります。

4
J Doe

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

3
Dario Brignone

Faクラスを定義していないこの<i class="fa fa-camera-retro" ></i>を使用してください

2
jitendra varshney

あなたはあなたのフォントファイルのために Access-Control-Allow-Origin を * に返す必要があります。

2
tronic

フォントパスが正しくないために、cssがフォントをロードしてアイコンをレンダリングできないため、添付フォントの固定パスを指定する必要がある可能性があります。

@font-face { 
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
2
SantoshK

私は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'）;

誰かに役立つことを願っています。

1
André Duarte

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

@import "font-awesome-sprockets";

説明：

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

1
Marklar

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を追加する必要はありません。

1
vilsbole

2018年12月の時点で、私は彼らのウェブサイト上で font-awesome 5.xx cdnの代わりにbootstrapcdnでホストされている安定バージョン4.7.0を使用することがより簡単であると思います - ブレーク。

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

アイコンは同じです。

<i class="fa fa-facebook"></i>
1
ehacinom

私のApacheの設定でルートディレクトリのためのAllow from noneディレクティブを持っていたのでそれは私のために働いていませんでした。これが私の仕事の仕方です。

私のディレクトリ構造：

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

私は自分のrootへのアクセスを拒否し続け、代わりに私のApache設定にroot/font-awesome /用の別のディレクトリエントリを追加しました。

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>
0
user3325776

非常に多くの答えがあるので、私は私のために私の仕事を加えます（あなたがPROを使わないのなら名前を変更してください）：In _typography.less

//
//  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;
}
0
BartZalas

相対パスではなく絶対パスを使用することで解決しました。私は相対パスを使っていました（下記の最初の例を見てください）それはうまくいきませんでした。コンソールで確認したところ、サーバーから404が返されていました。ファイルが見つかりません。

相対パスにより404が発生しました： 

@font-face { 
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}

絶対パスでブラウザを越えて解決しました： 

@font-face { 
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}

あなたがそうしなければならないなら、私はこれをすることを勧めません、しかしそれは私のために働きます。もちろん、font-awesome.cssファイルのすべてのフォントフォーマットに対してこれを繰り返すべきです。

0
Tim

Fontawesome-all.cssファイルを再確認してください - 一番下にwebfontsフォルダへのパスがあります。 Mineは "../ webfonts"フォーマットを持っていました、それはcssファイルがそれがあるところから1レベル上を見ていることを意味しました。私のcssファイルはすべてcssフォルダーにあり、フォントを同じフォルダーに追加したので、これは機能しませんでした。

フォントフォルダを1つ上のレベルに移動するだけで、すべてうまくいくはずです。

Font Awesome 5.0でテスト済み

0
Ross

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

基本的に、パッケージマネージャーを介してインストールされたバージョンは、 https://fontawesome.com/ Webサイトに表示されるバージョンより遅れている可能性があります。したがって、今日（2019年6月21日）に、パッケージマネージャーは最新バージョンとしてv4.7.0をインストールしますが、Webサイトは、 v5。*。

解決策は、v4.7.0https://fontawesome.com/v4.7. のアイコンが記載されているWebサイトにアクセスし、適切なアイコンをコピーします。 <i class="fa fa-sign-in" aria-hidden="true"></i>をHTMLに組み込みます。より多くのコンテキストを見つけることができます here 。

0
Lukasz Dynowski

font-weight: 900;

Font Awesome 5では別の問題がありました。FontAwesomeアイコンのデフォルトのフォントの太さは900ですが、spanとiタグの場合は400に書き換えました。それを修正したとき、それはちょうどうまくいきました。

これが彼らのGithubページの問題参照です、 https://github.com/FortAwesome/Font-Awesome/issues/11946

誰かに役立つことを願っています。

0
manian

バージョン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">
0
live-love

Fontawesome 5では、キャッシュされたバージョンのJSをHTTP経由で配信することができます。

<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 の詳細情報

0
desertSniper87

私の問題は

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

の中

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

タグ

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

0
Alex Burdusel

私のために（私のWindows 7マシン上で）問題を解決したものは私のプロジェクトディレクトリを復号化することでした。あなたのウェブサイトをテストするとき、それが元々どれだけ多くの視覚的および機能的な不具合が発生するかはクレイジーです。コマンドプロンプトを表示して実行するだけです。

attrib -R %PROJECT_PATH%\*.* /S
cipher /a /d /s:%PROJECT_PATH%

...ここで、％PROJECT_PATH％は、コードが格納されているディレクトリへのフルパス名です。

0
ShieldOfSalvation

上流階級で使用する

<div class="container">
  <i class="fa fa-facebook"></i>
</div>
0
mrbengi

私は成功せずに上記のいくつかの提案を試みました。

私はNuGeTパッケージを使います。 are（何らかの理由で）複数の名前付きバージョン（font-awesome、fontawesome、font.awesomeなど）

それが価値があるもののために：私はインストールされたすべてのバージョンを削除してから、 font.awesome の最新バージョンだけをインストールしました。 font.awesome 何かを微調整したり設定したりする必要なく動作しました。

他の名前付きバージョンから欠けていることがたくさんあると思います。

0
Danie Schoeman

追加してください

@import 'https://****.net/*********/font-awesome.min.css';
@font-face {
    font-family: 'FontAwesome';
    src: url('https://****.net/*********/FontAwesome.otf');
    src: url('https://****.net/*********/FontAwesome.otf?#iefix')
}

これはあなたのcssの上に、正しくcssとフォントをダウンロードしてリンクする、問題はFontAwesomeが正しくロードされていないためです。

ありがとう

0
subindas pm