Изменение ширины шрифта Удивительные значки

Я пытаюсь настроить масштабирование и ширину значка. Я специально пытаюсь сделать значок

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

шире, но не выше.

Я не пытаюсь сделать это fa-2x или fa-3x. Я пытаюсь масштабировать его так, чтобы ширина составляла, скажем, 150%, а высота все равно 100%.

Ответы

Ответ 1

Действительно легко использовать масштаб

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

Ответ 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