Изменить размер FontAwesomeIcon - PullRequest
Новая
       146

Изменить размер FontAwesomeIcon

0 голосов
/ 07 августа 2020

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

import { faSort } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

... 

<button
  className="my-button"
  onClick={() => this.doSomething()}
  type="button">
  <FontAwesomeIcon icon={faSort} />
</button>

Я пробовал добавить в инструменты разработчика width, height, size с разными значениями, но значок не меняет свой размер. Это потому, что это SVG?

Есть ли способ уменьшить его?

1 Ответ

0 голосов
/ 07 августа 2020

FontAwesome поставляется с предопределенными размерами, которыми вы можете управлять через размер атрибута следующим образом: 

<FontAwesomeIcon icon="spinner" size="xs" />
<FontAwesomeIcon icon="spinner" size="lg" />
<FontAwesomeIcon icon="spinner" size="6x" />

Но чтобы получить полный контроль, я бы рекомендовал добавить имя класса: 

<FontAwesomeIcon icon="spinner" className="inside-button" />

Какой можно управлять с помощью CSS следующим образом: 

.inside-button {
  font-size: 16px;
  color: white;
}
...