【问题标题】:Changing Width of Font Awesome Icons更改字体真棒图标的宽度
【发布时间】:2015-02-17 15:20:50
【问题描述】:

我正在尝试调整图标的缩放比例和宽度。我正在专门尝试制作图标

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

更宽,但不是更高。

我不想让它成为fa-2xfa-3x。我正在尝试缩放它,使宽度为 150%,而高度仍为 100%。

【问题讨论】:

  • 字体真棒你必须使用 font-size 来调整大小
  • font-size 使用固定缩放。我正在尝试独立于高度来缩放宽度。
  • 也许这会有所帮助? *.com/a/16447826/107244
  • Font Awesome 是一种字体,图标实际上是文本,所以你的问题应该是我可以拉伸文本吗:*.com/questions/6351013/css-can-i-stretch-text

标签: html css font-awesome


【解决方案1】:

使用比例真的很容易

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

【讨论】:

  • 是的,我希望我不必使用转换,但由于它是一种字体,我想我必须这样做。谢谢。
  • 太好了,谢谢。也应该使用跨浏览器前缀? -webkit-transform: scale(1.5,1); -moz-transform: scale(1.5,1); -ms-transform: scale(1.5,1); -o-transform: scale(1.5,1); transform: scale(1.5,1);
  • 这就像一个魅力。虽然我用它来增加字体真棒图标的高度,但它仍然给了我一个想法。
  • 这会使图标变形。使用字体大小到上 div/元素对我来说很好。
  • @Amitkumar - 是的,当然会。但是,OP 询问了I'm specifically trying to make the icon wider, but not taller.,这就是为什么这是对所提问题的正确答案。
【解决方案2】:

此答案仅在您尝试调整列表中的图标时有效。但是我发布这个是因为我猜有些访问这个页面的人就是这种情况。

如果你对图标应用“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】:

    一开始我还担心如何改变字体的图标大小,我尝试了很多方法,甚至尝试添加一些单独增加或 减小图标的大小..但没有任何效果..但后来我发现 一些已经由 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">
    

    现在享受你的图标 ..goodluck

    【讨论】:

    • 好建议!这应该是正确的答案!