だから私はマーケティングページを試作しようとしていると私はブートストラップと新しい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>
しかし、それらすべてが大きな正方形にレンダリングされます。誰が何が起こっているのか知っていますか?
documentation (ステップ3)に従って、あなたはあなたのサイト上のフォントの場所を指すように供給されたCSSファイルを修正する必要があります。
fa
クラスと、希望するアイコンを識別するクラスfa-Twitter
、fa-search
など、2つのクラスが必要です。
<!-- Wrong -->
<i class="fa-search"></i>
<!-- Correct -->
<i class="fa fa-search"></i>
これを使って
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Amazon Cloudfront CDNについても同様の問題がありましたが、maxcdnからロードし始めた後に解決しました
これは助けになるかもしれません、あなたが誤ってフォントファミリーを変更していないことを確認するためにチェックしてください。 .fa項目のフォントファミリーをFontAwesomeから変更した場合、アイコンは表示されません。それはいつも愚かで小さいものです。
誰かに役立つことを願っています。
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;
}
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">
私は以前のいくつかの解決策で同じ問題を解決しようとしましたが、私の状況ではうまくいきませんでした。最後に、これら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">
私はFont Awesome 4.3.0
を maxcdnは動作します からリンクしているだけです here 、
しかし あなたのサーバのHostへ 同じフォルダにフォントとcssを置くことは私のためにこのように働いた
それからCSSをリンクしてください。
<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />
希望は誰かを助けます。
私はこの問題を抱えていました。問題は私がフォントファミリーのCSSスタイルを持っていたということでした!フォントの素晴らしいフォントを上書きすることが重要です。
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つの相互に排他的なリソースセット。最初のリソースセットはフィルタリングするファイルを定義し、もう一方のリソースセットは変更しないままコピーするファイルを定義します... "
Fasクラスとfaクラスの2つのクラスが必要です。多分これでうまくいくでしょう:
// Wrong
<i class="fas fa-search"></i>
// Correct
<i class="fa fa-search"></i>
これは、新しいバージョン3.0ではもっと簡単になるはずです。最も簡単なのはBootstrap CDNを指すことです: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome
私はこの問題を抱えていて、年齢を問わずFAを使ってきたにもかかわらず慎重に各ステップを踏み出しました。
* {
font-family: Arial !important;
}
愚かな間違いですが、これは将来誰かを悩ます可能性があります。
サーバーがIISの場合は、必ず.woffファイル拡張子を提供する正しいMIMEを追加してください。正しいMIMEはapplication/octet-stream
です
Faクラスを定義していないこの<i class="fa fa-camera-retro" ></i>
を使用してください
あなたはあなたのフォントファイルのために Access-Control-Allow-Origin を * に返す必要があります。
フォントパスが正しくないために、cssがフォントをロードしてアイコンをレンダリングできないため、添付フォントの固定パスを指定する必要がある可能性があります。
@font-face {
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
私は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');
誰かに役立つことを願っています。
Official Font Awesome SASS Ruby Gemを使用します 私のapplication.css.scssに以下の行を追加してエラーを修正しました
@import "font-awesome-sprockets";
説明:
Font-awesome-sprocketsファイルには、フォントファイルへの正しいパスを見つけるために使用されるsprockets assestヘルパーのSass関数が含まれています。
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を追加する必要はありません。
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>
私の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>
非常に多くの答えがあるので、私は私のために私の仕事を加えます(あなたが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;
}
相対パスではなく絶対パスを使用することで解決しました。私は相対パスを使っていました(下記の最初の例を見てください)それはうまくいきませんでした。コンソールで確認したところ、サーバーから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ファイルのすべてのフォントフォーマットに対してこれを繰り返すべきです。
Fontawesome-all.cssファイルを再確認してください - 一番下にwebfontsフォルダへのパスがあります。 Mineは "../ webfonts"フォーマットを持っていました、それはcssファイルがそれがあるところから1レベル上を見ていることを意味しました。私のcssファイルはすべてcssフォルダーにあり、フォントを同じフォルダーに追加したので、これは機能しませんでした。
フォントフォルダを1つ上のレベルに移動するだけで、すべてうまくいくはずです。
Font Awesome 5.0でテスト済み
パッケージマネージャーを介してfont-awesome
をインストールした場合( yarn または npm )、インストールされているバージョンに注意してください。または、font-awesome
をかなり以前にインストールした場合は、インストールされているバージョンを確認してください。
基本的に、パッケージマネージャーを介してインストールされたバージョンは、 https://fontawesome.com/ Webサイトに表示されるバージョンより遅れている可能性があります。したがって、今日(2019年6月21日)に、パッケージマネージャーは最新バージョンとしてv4.7.0をインストールしますが、Webサイトは、 v5。*。
解決策は、v4.7.0
https://fontawesome.com/v4.7. のアイコンが記載されているWebサイトにアクセスし、適切なアイコンをコピーします。 <i class="fa fa-sign-in" aria-hidden="true"></i>
をHTMLに組み込みます。より多くのコンテキストを見つけることができます here 。
font-weight: 900;
Font Awesome 5では別の問題がありました。FontAwesomeアイコンのデフォルトのフォントの太さは900ですが、spanとiタグの場合は400に書き換えました。それを修正したとき、それはちょうどうまくいきました。
これが彼らのGithubページの問題参照です、 https://github.com/FortAwesome/Font-Awesome/issues/11946
誰かに役立つことを願っています。
バージョン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 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>
私の問題は
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
の中
<!-- build:css assets/styles/main.css -->
<!-- endbuild -->
タグ
タグの外側に配置して修正しました。
私のために(私のWindows 7マシン上で)問題を解決したものは私のプロジェクトディレクトリを復号化することでした。あなたのウェブサイトをテストするとき、それが元々どれだけ多くの視覚的および機能的な不具合が発生するかはクレイジーです。コマンドプロンプトを表示して実行するだけです。
attrib -R %PROJECT_PATH%\*.* /S
cipher /a /d /s:%PROJECT_PATH%
...ここで、%PROJECT_PATH%は、コードが格納されているディレクトリへのフルパス名です。
上流階級で使用する
<div class="container">
<i class="fa fa-facebook"></i>
</div>
私は成功せずに上記のいくつかの提案を試みました。
私はNuGeTパッケージを使います。 are(何らかの理由で)複数の名前付きバージョン(font-awesome、fontawesome、font.awesomeなど)
それが価値があるもののために:私はインストールされたすべてのバージョンを削除してから、 font.awesome の最新バージョンだけをインストールしました。 font.awesome 何かを微調整したり設定したりする必要なく動作しました。
他の名前付きバージョンから欠けていることがたくさんあると思います。
追加してください
@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が正しくロードされていないためです。
ありがとう