防止字体的svg翻译答案

【问题标题】：Prevent svg translation of fontawesome防止字体的svg翻译
【发布时间】：2018-10-03 15:35:57
【问题描述】：

我有角度和字体真棒的问题。在第一代图标列表中，所有基于 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> -->

有什么办法可以防止这种情况发生吗？强制翻译？

这可能是有问题的。例如我不能使用实心图标:(

【问题讨论】：

标签： angular svg font-awesome-5

【解决方案1】：

如果您希望 Font Awesome 不自动将看起来像图标的<i> 标签替换为相应的<svg>s，您可以change the configuration 禁用autoReplaceSvg。

如果您通过<script> 标签加载，可能看起来像这样（确保在加载 Font Awesome 之前进行配置）：

  <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 }

【讨论】：

【解决方案2】：

我遇到了同样的问题，当我检查元素时，图标标签实际上被转换为 SVG。

问题是我通过 CSS 和 JS 调用都加载了 fontawesome。当我删除对 JS lib 的调用并仅调用 CSS 文件时，图标呈现正确。

【讨论】：

对我来说也一样。删除 JS 文件导入解决了这个问题，也解决了另一个问题，即在 Vue.js 应用程序中的实体图标和常规图标之间切换不起作用。
谢谢你们。它也帮助了我。
我不能告诉你们这个评论对我有多大帮助！！！我被困在某件事上超过 2 天，与 Font awesome 没有直接关系，但事实证明问题是因为 font awesome 加载了 css 和 js