web-dev-qa-db-ja.com

Font Awesome 5（CSS付き）fa-layers

バージョン4.7からFontAwesome 5（FA 5）にアップグレードしました。その理由は、レイヤー化されたアイコンでした。 FA 4.7では、fa-stackクラスが使用されていました。 FA 5では、fa-layersは非常に強力です。

私の知る限り、この問題はfa-layersがFontAwesomeの純粋なjsバージョンでのみ実装されています。 （fontawesome-all.jsを使用）。 cssバージョンを使用する場合、フォルダー構造のどこにもfa-layersクラスは表示されません（現在のバージョンの5.0.8）。 FA 5のCSSバージョンでfa-layersを使用することは可能ですか？

Cssバージョンとはこれを意味します：

<head>
  <!--core first + styles last-->
  <link href="/static/fontawesome/fontawesome-all.css" rel="stylesheet">
</head>

Bt Jsバージョン、私はこれを意味します：

<head>
  <!--load everything-->
  <script defer src="/static/fontawesome/fontawesome-all.js"></script>
</head>

Fontawesome-all.jsがすべてのiタグをsvgに置き換えたため、このバージョンではcssの操作が困難です。したがって、cssバージョンにJsバージョンのすべての機能がある場合は、CSsバージョンのFA5を使用したいと思います。

font-awesome-5
7
Atilla Baspinar

いいえ、CSSを使用したWebfontsには、JSを使用したSVGのすべての機能が備わっているわけではありません。 JSでSVGを使用する方法 ページには、JSでSVGの新機能または排他的な機能の一部が表示されます。 Layers 具体的には、JSを使用したSVGの新機能です。

レイヤーは、アイコンとテキストを視覚的に重ねて配置する新しい方法であり、従来のアイコンスタックに取って代わります。

CSSを使用したWebfontsのスタックを使用して、いくつかの興味深いことを行うことができます。 コードペンの例

<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fal fa-circle fa-2x fa-stack-1x fa-inverse"></i>
  <i class="far fa-triangle fa-stack-1x fa-inverse"></i>
</span>

しかし、スタックは、JSを備えたSVGでのみ利用可能なパワートランスフォームを備えたレイヤーほど強力ではありません。

4
mwilkerson

主にパフォーマンス上の理由から、Webフォントバージョンも使用することを好みます。また、fa-layersクラスでより高度なレイヤーアイコンを使用したかったのです。

CSSでfa-layers機能の一部を再作成し、スタイルシートを配置しました GitHubにアップ 。それは完全でも完全でもありません。私はまだそれに取り組んでいますが、WebフォントとCSSから切り替えることなく、不足している機能のいくつかを取得するのに役立つ可能性があります。

1
dangowans