font-awesome - 如何使用 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 代码。

图标/SVG 的样式可以通过设置父对象的样式来控制。

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

这会将图标呈现为 2 倍大小并显示为红色。