web-dev-qa-db-ja.com

fontawesomeのSVG変換を防止

angularとfont awesomeに問題があります。アイコンのリストの最初の世代で、すべてのcssクラスベースのアイコンが突然svgに変換されます。これは、無地のアイコンにのみ影響します。次に例を示します。

<i class="fas fa-2x fa-minus-square"></i>

どういうわけかに翻訳されます

<svg _ngcontent-c16="" class="svg-inline--fa fa-minus-square fa-w-14 fa-2x"
 ng-reflect-ng-class="fas fa-2x fa-minus-square" aria-hidden="true" data-prefix="fas" data-icon="minus-square"
 role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
    <path fill="currentColor"
      d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM92 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H92z">
    </path>
</svg>
<!-- <i _ngcontent-c16="" class="fas fa-2x fa-minus-square" ng-reflect-ng-class="fas fa-2x fa-minus-square"></i> -->

この状況を防ぐことができるオプションはありますか？どういうわけか翻訳を強制しますか？

問題が発生する可能性があります。たとえば、無地のアイコンは使用できません:(

angularsvgfont-awesome-5
14
Paweł Domański

Font Awesomeがアイコンのように見える<i>タグを対応する<svg>sに自動的に置き換えたくない場合は、 構成を変更 してautoReplaceSvgを無効にすることができます。 。

<script>タグを介してロードしている場合は、次のようになります（Font Awesomeをロードする前に、設定beforeを実行してください）。

  <head>
    <script type="text/javascript">
      // Notice how this gets configured before we load Font Awesome
      window.FontAwesomeConfig = { autoReplaceSvg: false }
    </script>
    <script src="fontawesome.js"></script>
    <script src="fa-solid.js"></script>
  </head>

または、独自のバンドルを構築していて、独自のスクリプト内から構成にアクセスできる場合は、次のようにできます。

import fontawesome from '@fortawesome/fontawesome'

fontawesome.config = { autoReplaceSvg: false }
14
mwilkerson

同じ問題がありました。要素を検査すると、アイコンタグは実際にはSVGに変換されました。

問題は、CSS呼び出しとJS呼び出しの両方でfontawesomeをロードしていたことです。 JS libの呼び出しを削除し、CSSファイルのみを呼び出すと、アイコンが適切にレンダリングされました。

11
S.Simeonov