Search code examples
cssreactjsfont-awesome-5

React - Center and resize font awsome icon

So, I am making a widget component in react, and I need to add an icon that needs to be centered. I have this code:

<div  className={classes.textCenter}>
    <i className={"fas fa-lungs fa-2x"} />
</div>

But I get this:

enter image description here

See that the enclosing element (the i tag) is centered, but the icon is bigger.

I also have the following jss code:

"& .fab,& .fas,& .far,& .fal,& .material-icons": {
    position: "relative",
    display: "inline-block",
    top: "0",
    verticalAlign: "middle",
    textAlign: "center"
  },

but that doesn't appear to be making any difference.

Thanks in advance.

Solution

  • Please try this for the parent div -:

    .textCenter{
    display: flex;
    justify-content: center;
    align-items: center;
}

    Also please remove any existing icon classes.