如何使用 svg 框架调整图标大小

Question

我使用 Font Awesome 5 工作：

<i class="fa fa-user"></i>
<script src="/js/packs/solid.js"></script>
<script src="/js/fontawesome.js"></script>

但是设置 i 标签的样式没有任何效果。所以我尝试改用网络字体：

<link rel="stylesheet" href="css/font-awesome-core.css">
<link rel="stylesheet" href="css/font-awesome-solid.css">
<i class="fas fa-user"></i>

它奏效了。但是我不应该使用 svg 框架吗？我不是 Font Awesome 的传统主义者。你能用不同的颜色、大小和旋转设置字体样式吗？

Answer 1

FontAwesome5 SVG 框架将标签转换为源代码中完全呈现的 SVG 代码。

icon/SVG 的样式可以通过设置父项的样式来控制。

<div style="font-size: 200%; color: red">
<i class="fas fa-user"></i>
</div>

这将以 2 倍大小和红色呈现图标。

How to resize icons using the svg framework