html - 带有 JS 的 Fontawesome 5 SVG：svg 如何使用 font-size css 属性进行缩放？

Question

FA5 如何通过font-size css 属性缩放SVG图标？如何像 Fontawesome 那样扩展这个示例 svg？非常感谢你。

svg{
}

<svg height="100" width="100">
  <circle cx="50" cy="50" r="50"/>
</svg> 

Answer 1

它可以通过font-size这样的方式进行缩放：

svg {width: 3em; height:3em}

#svg1 {font-size:10px}
#svg2 {font-size:20px}

<svg id="svg1" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49"/></svg>

<svg id="svg2" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49"/></svg>

Answer 2

使用 FA5 SVG 图标，它将默认为 svg 元素附加一个类，因此您可以使用以下内容连接到它

<div class="myIcon">
    <svg height="100" width="100">
        <circle cx="50" cy="50" r="50"/>
    </svg> 
</div>

.myIcon .svg-inline--fa{
    font-size: 20px;
}