Как указать фиксированое размер для иконки font awesome?

Question

[Alexander3928]

Мне нужно чтобы иконка была с размерами 30x30, не больше и не меньше. Как это можно сделать для иконок font awesome?

https://codepen.io/Alexxxsander/pen/dydWrGX

Answer 1

[Антон Антон]

Учитывая соотношение сторон иконок фонтэйвесом 1.25:1 (максимум, есть от квадратных до таких), решение для подключения через шрифт в общем случае такое: https://codepen.io/FragsterAt/pen/OJQmqow
Для индивидуальных иконок можно подобрать свои размеры.

Comments

[Alexander3928]

Бордер был просто как пример, чтобы показать что не равномерные знаяения

[Антон Антон]

Alexander3928, какой бордер? в том примере, что я привел - всё четко, 300х300. при изменении значения в стиле все останется ровно каким нужно квадратным.

[Alexander3928]

Антон Антон, У тебя 1 див 300x300, а сама иконка 240x200(точно не помню)

[Антон Антон]

Alexander3928, ну не может быть квадратной прямоугольная иконка. сама иконка у меня 300х(300/1.25), занимаемое ей место - 300х300


и да, не div, а i

Answer 2

[Сергей delphinpro]

.fa {
  width: 1em;
  height: 1em;
  font-size: 30px;
  display: inline-block; // Чтобы высота сработала точно
}

Answer 3

[Владимир Коротенко]

.fa-gears {
 
  border: 2px solid red;
  width: 30px;
  height: 30px;
  font-size:24px;/*поиграйтесь размерами*/
}

Но правильней использовать документацию
https://fontawesome.com/docs/web/style/size