Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – FontAwesome size attribute does not change the size

I have the following code in my layout:

// Fontawesome
import { config, library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fas, far, fab)
config.autoAddCss = true;

I my component I am doing the following:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

// code
<a href="/onboarding/interests" className="px-10 py-3 mt-16 text-lg text-white bg-[#2967BC] rounded-lg hover:bg-[#004182]">
              <span className="flex items-center font-display">
                <FontAwesomeIcon icon="fa-brands fa-linkedin" size="2x" />
                <span className="ml-2">Sign in with LinkedIn</span>
              </span>
            </a>

When I try to change the size attribute the size change does not reflect.

Is there a way I can control this via tailwind utility classes?

Tags:

2

Answers


  1. 0

    You can change size of FontAwesome with Tailwind classes.
    FontAwesome works just like other fonts in HTML and you can change color or size of them with CSS. For example:

     <FontAwesomeIcon icon="fa-brands fa-linkedin" size="2x" className="text-red-500"/>
    Login or Signup to reply.
  2. 0

    use size 4 in className

    <FontAwesomeIcon icon="fa-brands fa-linkedin" className="text-red-500 size-4"/>

    import { config } from '@fortawesome/fontawesome-svg-core' 
import '@fortawesome/fontawesome-svg-core/styles.css' 
config.autoAddCss = false

    Add the above code to the layout.tsx file in the root.

    when importing icons do like this

    import {
  IconLookup,
  IconDefinition,
  findIconDefinition
} from '@fortawesome/fontawesome-svg-core'

const coffeeLookup: IconLookup = { prefix: 'fa-solid', iconName: 'fa-coffee' }
const coffeeIconDefinition: IconDefinition = findIconDefinition(coffeeLookup)

// ...

export class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>
          <FontAwesomeIcon icon={coffeeIconDefinition} />
        </h1>
      </div>
    )
  }
}

    code snippets from https://docs.fontawesome.com/web/use-with/react/use-with

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search