CODEWITHSUNDEEP
cssreactjssvgiconsfont-awesome
Leo Messi
Leo Messi

Reputation: 6166

Change size of FontAwesomeIcon

I'm using it as inside a button but I don't know how to change its size, to make it smaller more exactly.

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>

I've tried in Developer tools to add width, height, size with different values but the icon doesn't change its size. Is it because it's SVG?

Is there a way to make it smaller?

Upvotes: 5

Views: 7216

Answers (1)

1GR3
1GR3

Reputation: 348

FontAwesome comes with predefined sizes which you can control trough attribute size like this:

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

But to gain full control I'd recommend adding a classname:

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

Which can be controlled with CSS like this:

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

Upvotes: 6

Related Questions