20 replies

Icon inside Button

I've made a button component which I than used somewhere else. I placed

fontawesome 6 icon <i></i>

fontawesome 6 icon <i></i>

inside it and it's well aliged with the text in the button. As it was little bit bigger I changed the

 font-size

 font-size

of it. Now the icon is not vertically aligned. I tried using

svg

svg

which works fine and it's alignment is not affected by the font-size of the button. Why is that. Picture and codepen link are given.
CODE PEN:

font-size on line 37.

font-size on line 37.