angular – 防止fvtawesome的svg翻译

发布时间：2020-12-17 17:34:25 所属栏目：安全来源：网络整理

导读：我有问题角和字体真棒.在第一代图标列表突然所有基于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-n

我有问题角和字体真棒.在第一代图标列表突然所有基于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> -->

有没有可以防止这种情况的选择？以某种方式强制翻译？

这可能有问题.例如,我不能使用实心图标:(

解决方法

如果您希望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 }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!