Question

我试图调整图标的缩放和宽度。我特意试图制作图标

<i class="fa fa-bars fa-lg"></i>

更宽，但不高。

我没有尝试fa-2x或fa-3x。我试图缩放它以使宽度为150％，而高度仍为100％。

Answer 1

使用比例非常简单

.fa { transform: scale(1.5,1); }

Answer 2

一开始我也很担心怎么改变字体的图标大小太棒了，我尝试了很多方法，甚至尝试添加一些单独增加或减小图标的大小..但没有像它应该的那样工作..但后来我发现一些已经由 font awesome 定义的类可以使用图标的大小。和这是一些课程的列表..

<i class="fas fa-home fa-xs">
<i class="fas fa-home fa-sm">
<i class="fas fa-home fa-lg">
<i class="fas fa-home fa-2x">
<i class="fas fa-home fa-3x">
<i class="fas fa-home fa-4x">
<i class="fas fa-home fa-5x">
<i class="fas fa-home fa-6x">

现在享受你的图标..好运

Answer 3

仅当您尝试调整列表中的图标时，此答案才有效。但是我发布此消息是因为我想有些人访问此页面属于这种情况。

如果您将“ fa-fw”类应用于图标，则可以解决问题。

文档示例。

<div style="font-size: 2rem;">
  <div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
  <div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
  <div><i class="fas fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
  <div><i class="fas fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
  <div><i class="fas fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
</div>

文档 https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

改变字体真棒图标的宽度

3 个答案: