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

【问题标题】：How to resize icons using the svg framework如何使用 svg 框架调整图标大小
【发布时间】：2017-07-06 19:52:02
【问题描述】：

我让 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 传统主义者。你能用不同的颜色、大小和旋转来设计字体吗？

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：