CODEWITHSUNDEEP
reactjsfont-awesomereact-font-awesome
uberrebu
uberrebu

Reputation: 4339

How to vertically align react font awesome icons

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

enter image description here

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

Upvotes: 0

Views: 314

Answers (1)

Ajay poly
Ajay poly

Reputation: 73

You can try this:

.container {
  display: flex;
  align-items: center;
}
<div className='container'>
  <p>Powered by</p>
  <FaCcStripe size='60px' />
</div>

Upvotes: 1

Related Questions