How to vertically align react font awesome icons

Question

I am using react font awesome package and it is so annoying to see that some icons do not align vertically properly and tend to be lifted up higher than

As you can above, i scaled the react font awesome icon to 60px and it looks awful

here is how i use it within JSX

<p>Powered by <FaCcStripe size='60px' /></p>

How do i align it vertically to center with the other content or text? I mostly add the icons along with text and will like the icons to be vertically centered

Answer 1

You can try this:

.container {
  display: flex;
  align-items: center;
}

<div className='container'>
  <p>Powered by</p>
  <FaCcStripe size='60px' />
</div>