web-dev-qa-db-ja.com

fontawesome 5フォントファミリが機能しない

fontawesome 5をbootstrap 4のプロジェクトに統合しました。cssを介してフォントを呼び出すと、機能しません。 fontawesome 4では、コードは次のとおりでした。

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
float: right;
content: '\f107';
font-family: 'FontAwesome'; }

フォント名を変更しようとしましたが、機能しません

font-family: 'Font Awesome 5 Free'
cssfontsfont-awesome-5
50
Carmelo Valenti

Unicodeが間違っていますf107

a::after {
  content: "\f007";
  font-family: 'Font Awesome\ 5 Free';
}
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
<a>User</a>
<i class="fas fa-shopping-basket"></i>

または、font-weight: 900;で保存される場合もあります。フォントawesome 5の一部のアイコンは、font-weight: 900;なしでは機能しません。

a::after {
  content: "\f007";
  font-family: 'Font Awesome\ 5 Free';
  font-weight: 900;
}
116
Pedram

奇妙なことに、いくつかのアイコンに 'font-weight：9'を入れて表示する必要があります。

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
  content: '\f107';
  font-family: 'Font Awesome\ 5 Free'; 
  font-weight: 900; /* Fix version 5.0.9 */
}
71
Lenin Zapata

問題はfont-weightにあります。
Font Awesome 5の場合、{font-weight:900}を使用する必要があります

16
www.admin.ge

Fontawesome-all.cssファイルの使用：「Brands」フォントファミリを「Font Awesome 5 Free」から「Font Awesome 5 Brands」に変更すると、発生していた問題が修正されました。

すべてのクレジットを取ることはできません-CDNバージョンを見る直前に自分のローカルの問題を修正しました： https://use.fontawesome.com/releases/v5.0.6/css/all.css

CDNでも同様に問題が整理されています。

 @font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: normal;
    src: url("../webfonts/fa-brands-400.eot");
    src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

    .fab {
    font-family: 'Font Awesome 5 Brands'; }
    @font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
8
JTStuedle

900の重量を要求するのは奇妙ではなく、FontAwesomeによって意図的に制限が追加されているためです（同じユニコードを共有しているが、フォントの重量が異なるため）。有料の「Pro」バージョンでのみ利用可能です。

5
user3006765

FontAwesome 5以降、この方法でFontAwesomeアイコンを使用するには、新しい「searchPseudoElements」オプションを有効にする必要があります。

<script>
  window.FontAwesomeConfig = {
    searchPseudoElements: true
  }
</script>

この質問も参照してください： 擬似要素のFont awesome 5 および新しいFont Awesome API： https://fontawesome.com/how-to-use/font-awesome-api =

さらに、CSSコードのfont-familyを次のように変更します

font-family: "Font Awesome 5 Regular";
4
Mesa

「すべて」バージョンを使用したくなかったため、「fontawesome-all.min.css」ファイル（以前はヘッダーに含まれていた）で「family」タグを検索し、最後に宣言@font-face{font-family:**Font Awesome\ 5 Free**;font-style:normal;を見つけました

そのため、content: "\f0c8";コードを使用したい要素のスタイルシートで、font-family: Font Awesome\ 5 Free;を追加（または変更）し、機能しました。

.frb input[type="checkbox"] ~ label:before {
    font-family: Font Awesome\ 5 Free;
    content: "\f0c8";
    font-weight: 900;
    position: absolute;
}
2
WojCup

npm i-@ fortawesome/fontawesome-freeを保存

私のSccs：

@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";

私にとってはうまくいきました！

2
Tan Nguyen

奇妙なことに、それが機能するためには、フォントファミリとフォントウェイトを含める必要があります。ここに私のために働いたものがあります：

.second-section-header::after {
    content: "\f259";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
}

そこから、必要なスタイルの追加を開始できます。

まあ言ってみれば：

.second-section-header::after {
    content: "\f259";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    font-size: 100px;
    color: white;
    z-index: 1;
    position: absolute;
}

これがお役に立てば幸いです。

1
Leonard Luck Ojojo

解決策は、通常のフォントのようにそれを呼び出すことです：

@font-face {
font-family: "Font Awesome 5 Free-Regular-400";
src: url(../fonts/Font%20Awesome%205%20Free-Regular-400.otf) format("opentype");}
1
Menzezzz

それはおそらく価格モデルについてです...;）

https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

Solid    Free           fas   <i class="fas fa-camera"></i> 
Regular  Pro Required   far   <i class="far fa-camera"></i> 
Light    Pro Required   fal   <i class="fal fa-camera"></i> 
Brands   Free           fab   <i class="fab fa-font-awesome"></i>
0
Michal Miky Jankovský

私は解決策を見つけました。

  • fontawesome-all.cssを統合

  • ファイルの最後で2番目の@ font-faceを検索して置き換えます

    font-family： 'Font Awesome 5 Free';

と

font-family: 'Font Awesome 5 FreeR';

交換してください：

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }

と

.far {
  font-family: 'Font Awesome 5 FreeR';
  font-weight: 400; }
0
Carmelo Valenti

SVG with JavaScriptを使用している場合、デフォルトで無効になっているため、これを有効にする必要があります。つかいます

<script data-search-pseudo-elements ... >

スクリプトタグ内。

0
Juri