Question

我正在尝试在css块中使用带有JS的FA5 SVG，但我似乎并没有让它工作。我搜索堆栈溢出但我找到了CSS版本的结果，但没有找到SVG版本的结果。我在头部代码中添加了以下javascript

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

我在我的css中使用了以下代码

display: inline-block;
font-family: 'Font Awesome 5 Free';
font-weight: 400;
margin-right: 5px;
font-size: 13px;
content: "\f1f8";

我正在尝试添加以下图标https://fontawesome.com/icons/trash?style=solid

Answer 1

您实际上也可以在JS + SVG模式下启用它。

不过，请注意it will make replacement really slow。

在最近的documentation中，他们添加了一个提示：

必须通过SVG启用此功能

如果您将SVG与JavaScript结合使用，则需要启用此功能，因为默认情况下该功能处于禁用状态。在脚本标签内使用<script data-search-pseudo-elements ... >。

这in the configuration documentation有更详细的描述：

<head>
  <script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" data-search-pseudo-elements></script>
  <style>
  .glasses::before {
    display: none;
    font-family: 'Font Awesome 5 Solid';
    content: "\f530";
  }
  </style>
</head>
<body>
  <span class="glasses"></span>
</body>

有效的font-family值为："Font Awesome 5 Solid"，"Font Awesome 5 Regular"，"Font Awesome 5 Light"和"Font Awesome 5 Brands"。

具体示例

在我的情况下，我有一张桌子，希望这些箭头指示排序：

th.sort-down::after {display: none; font-family: 'Font Awesome 5 Solid'; content: "\f0dd"; /* fas fa-sort-up   */}
th.sort-up::after   {display: none; font-family: 'Font Awesome 5 Solid'; content: "\f0de"; /* fas fa-sort-down */}
th::after           {display: none; font-family: 'Font Awesome 5 Solid'; content: "\f0dc"; /* fas fa-sort */}

<script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" data-search-pseudo-elements></script>

<table border="1">
  <thead>
    <th>no sort</th>
    <th class="sort-down">sorted down</th>
    <th class="sort-up">sorted up</th>
  </thead>
  <tbody>
    <tr><td>1</td><td>2</td><td>3</td></tr>
  </tbody>
</table>

也就是说，通过将图标放入html，并使用css来显示或隐藏它也可以工作，可能会更好（在性能方面）：

th.sort-up   .fa-sort      {display: none;}
th.sort-up   .fa-sort-up   {display: inline;}
th.sort-down .fa-sort      {display: none;}
th.sort-down .fa-sort-down {display: inline;}
th .fa-sort-up, th .fa-sort-down {display: none}

<script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" data-search-pseudo-elements></script>
    
<table border="1">
  <thead>
    <th>
      no sort
      <i class="fas fa-sort"></i><i class="fas fa-sort-up"></i><i class="fas fa-sort-down"></i>
    </th>
    <th class="sort-down">
      sorted down
      <i class="fas fa-sort"></i><i class="fas fa-sort-up"></i><i class="fas fa-sort-down"></i>
    </th>
    <th class="sort-up">
      sorted up
      <i class="fas fa-sort"></i><i class="fas fa-sort-up"></i><i class="fas fa-sort-down"></i>
    </th>
  </thead>
  <tbody>
    <tr><td>1</td><td>2</td><td>3</td></tr>
  </tbody>
</table>

另外可行的选择是仅使用“旧的” CSS + Fonts方式，而不是javascript + SVG版本。

Answer 2

当您想要使用SVG图标时，您只能参考CSS中的FA-Icons，这只有在使用CSS时才能使用。要使用SVG，您必须引用＆＃34; fas fa-trash＆＃34;在我们的代码中（JS将用适当的SVG替换）

＆＃13;

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<i class="fas fa-trash"></i>

＆＃13;

Fontawesome5 SVG在JS中使用JS？

2 个答案:

必须通过SVG启用此功能

具体示例