web-dev-qa-db-ja.com

擬似要素のフォントすごい5

Font awesome 4では、CSSを使用して：before /：after要素にアイコンを簡単に適用できます。

新しいフォントのすばらしい5 JS/SVG実装でも同じことが可能ですか？私が見ることができるように、これは関連するタグがhtmlに存在する必要がありますが、これは常に実用的ではありません。 CMSがあり、ユーザーが作成したすべてのコンテンツ<li>要素にアイコンを適用したい

FA5では古いcss/webfontsを引き続き使用できることを知っていますが、JSを使用する推奨方法で同じ機能が利用可能であればいいでしょう

font-awesomefont-awesome-5
43
Leigh

有効にする必要があります（デフォルトでは無効になっています）。

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

Css：

.class:before{
  display: none;
  content: "\f16c";
  font-family: "Font Awesome 5 Brands";
}

その他のタイプ：Font Awesome 5 + SolidまたはRegularまたはLightまたはBrands

44
fiasko

適切なfont-weightを指定すると、一部のシンボルが適切に表示されるようになります（代わりに「□□□」ではありません）。

font-weightは次のようにする必要があります。

  • 400RegularおよびBrandsシンボルの場合
  • 900 for Solidシンボル
  • 300 for Lightシンボル

つまりCSS + WebfontsでFont-Awesomeを使用する場合、CSSのみのソリューションは次のとおりです。

@import url("font-awesome/css/fontawesome-all.min.css"); /* FA CSS import */

/* ... */

.class:before {
    /* >> Symbol you want to use: */
    content: "\f16c";
    /* >> Name of the FA free font (mandatory), e.g.:
               - 'Font Awesome 5 Free' for Regular and Solid symbols;
               - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
               - 'Font Awesome 5 Brand' for Brands symbols. */
    font-family: 'Font Awesome 5 Free';
    /* >> Weight of the font (mandatory):
               - 400 for Regular and Brands symbols;
               - 900 for Solid symbols;
               - 300 for Light symbols. */
    font-weight: 900;

    /* >> Optional styling: */
    display: inline-block;
    /* ... */
}
121
benjaminplanche

私はこのようにうまく動作すると思います：

.class:before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}
16
Mohammed

私は5を使って仕事をしました

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

<head>および

:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  content: "\f167";
}

私のCSSで

6
Ward

このリンクを使用->： https://use.fontawesome.com/releases/v5.5.0/css/all.css

CSS

ul li{
    list-style-type: none;
    position: relative;
}

ul li:before{
  position: absolute;
  color:#ff0000;
  top:0;
  left:-30px;
  font-family: 'Font Awesome 5 Free';
  font-size:1.2em;
  content: "\f105";
  font-weight: 900; /* <-- add this or 400 for other styles */
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
1
Coyote Red

Fort Awesome を使用してアイコンを提供する場合、font-family: <my-kit-name>を追加する必要があり、font-weight: 400/900を使用する必要はありません。

詳細については、次のリンクを参照してください。

https://articles.fortawesome.com/how-to-using-fort-awesome-icons-f50ab11a2d2a

1
Chrillewoodz

この値を設定すると、私の問題は消えます：font-weight：900;

1
Mantas Dainys