Html 改变字体真棒图标的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28564793/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing Width of Font Awesome Icons
提问by RedDwarfian
I'm trying to adjust the scaling and width of an icon. I'm specifically trying to make the icon
我正在尝试调整图标的缩放比例和宽度。我特别想制作图标
<i class="fa fa-bars fa-lg"></i>
<i class="fa fa-bars fa-lg"></i>
wider, but not taller.
更宽，但不高。
I'm not trying to make it fa-2xor fa-3x. I'm trying to scale it so that the width is, say 150%, while the height is still 100%.
我不是要让它fa-2x或fa-3x. 我正在尝试缩放它，以便宽度为 150%，而高度仍为 100%。
回答by Adam
Really easy using scale
使用秤真的很容易
.fa { transform: scale(1.5,1); }
回答by ohkts11
This answer only works when you are trying to adjust the icons in the list. But I am posting this because I guess some people visiting this page is in this situation.
此答案仅在您尝试调整列表中的图标时有效。但我发布此信息是因为我猜访问此页面的某些人处于这种情况。
If you are so applying "fa-fw" class to icons solves the problems.
如果您如此将“fa-fw”类应用于图标可以解决问题。
Example from docs.
来自文档的示例。
<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>
Docs https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons
文档 https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons
