我在我的网站上使用以下带有 SVG 的 Font Awesome 字体: https://fontawesome.com/icons/toggle-on?style=solid
我怎样才能加宽这个 Font Awesome 字体的宽度而不是高度?
最佳答案
基本上你不能改变图标的宽度/高度,除非你调整 SVG 的某些属性,例如 preserveAspectRatio
,这不会给你一个好的结果
svg {
width:200px;
height:50px;
color:red;
}
<svg aria-hidden="true" preserveAspectRatio="none" focusable="false" data-prefix="fas" data-icon="toggle-on" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" ><path fill="currentColor" d="M384 64H192C86 64 0 150 0 256s86 192 192 192h192c106 0 192-86 192-192S490 64 384 64zm0 320c-70.8 0-128-57.3-128-128 0-70.8 57.3-128 128-128 70.8 0 128 57.3 128 128 0 70.8-57.3 128-128 128z" class=""></path></svg>
另一个想法是使用纯 CSS 简单地重新创建它,您可以轻松缩放图标的宽度:
.icon {
display:inline-block;
height:60px;
width:200px;
border-radius:60px;
background:
radial-gradient(circle at calc(100% - 30px) 50%, transparent 20px,orange 21px);
}
<div class="icon">
</div>
<div class="icon" style="width:120px;">
</div>
<div class="icon" style="width:60px;">
</div>
您还可以通过添加 CSS 变量来控制高度:
.icon {
--h:30px;
display:inline-block;
height:calc(2*var(--h));
width:200px;
border-radius:calc(2*var(--h));
background:
radial-gradient(circle at calc(100% - var(--h)) 50%, transparent calc(var(--h) - 10px),orange calc(var(--h) - 9px));
}
<div class="icon">
</div>
<div class="icon" style="width:120px;--h:40px;">
</div>
<div class="icon" style="width:100px;--h:20px;">
</div>
<div class="icon" style="width:60px;">
</div>
还可以通过调整background-position
来实现切换效果:
.icon {
--h:30px;
display:inline-block;
height:calc(2*var(--h));
width:200px;
border-radius:calc(2*var(--h));
background:
radial-gradient(circle , transparent calc(var(--h) - 10px),orange calc(var(--h) - 9px));
background-size:calc(200% - 2*var(--h)) 100%;
transition:1s;
}
.icon:hover {
background-position:100% 0;
}
<div class="icon">
</div>
<div class="icon" style="width:120px;--h:40px;">
</div>
<div class="icon" style="width:100px;--h:20px;">
</div>
<div class="icon" style="width:60px;">
</div>
关于css - 如何扩展 FontAwesome 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54837650/