Icon inside Button
I've made a button component which I than used somewhere else. I placed
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 of it. Now the icon is not vertically aligned. I tried using 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.
https://codepen.io/Arslan-Akbar/pen/oNJMNqY
12 Replies
well if I use use icon this way it works.
<span><i class='icon'></i></span>. But would love to know the reason why.Pretty sure this is because FontAwesome icons are well Fonts xD
hence why its in a <i> tag they hijack the italic element to insert the font icon into. So its going to inherit the font size.
I think they use <span> as an isolation wrapper too 🤔 that part I'm not so sure on.
I know many examples show <span style="font-size"> so it shows the use in reverse 🤔
you should also be able to use their attributes though if I remember right.
Yes docs show it
Sizing Icons
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
looks to be based on the font-size still though
oh no keep reading
class="fa-3x"
so you can do both 😄
In your example for the + I found <i class="fa-solid fa-plus fa-lg"></i> to work nice. I always tend to make my buttons grid and place-items: center; too (which I guess you did do with flex)Thank you for that . I actually didn't want to change the icon size actually but as you said it inherits the button size. Wrapping it in span also works but what you gave also looks good too.
I could no replicate the span thing xD
still inherits 🤔
yeah the font-size does change. I actually meant atleast it doesn't change the alignment. But yeah the font-size also does change even if i wrap it in span
I basically use https://icones.js.org/ and just make my own svg sprites sheets. Or just use the inline.
https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/
Thank you 💛