带JS的Fontawesome 5 SVG:svg如何使用font-size css属性进行缩放?

时间:2018-02-20 22:20:48

标签: html css svg font-awesome font-awesome-5

FA5如何通过 font-size css属性缩放 SVG 图标?我怎么能像Fontawesome一样扩展这个例子svg呢?非常感谢你。



svg{
}

<svg height="100" width="100">
  <circle cx="50" cy="50" r="50"/>
</svg> 
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

可以通过svg {width: 3em; height:3em} #svg1 {font-size:10px} #svg2 {font-size:20px}进行缩放,如下所示:

&#13;
&#13;
<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>
&#13;
 <p id="ok"></p>
        <script>
            document.getElementById("ok").innerHTML =
 Math.floor(Math.random() * 10);
        </script>
 <script>
        if (ok >=6){
        winner="yes"
        else 
        loser="no"
    }
</script>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

使用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;
}