I’m doing the exercises of The Ultimate HTML5 and CSS3 Series - Part 2. And now I’m stuck with the 2nd exercise of ‘Images’ section. How do I align the ‘ul>li’ text after Font Awesome icons?? They look ugly, and I’ve tried adding paddings and margins, even created borders around the icons (to see what’s wrong). Different icons have different sizes. So no matter what I do, the text of ‘li’ elements don’t align. I wanna know why this happens and how do I deal with it??
Problem: Different icons have different widths.
Solution: Add “fa-fw” to your Font Awesome icon elements. That’s it!
Make yourself familiar with the development tools for inspecting a page to find the causes of such issues.
You didn’t share your code but if the icons have different sizes you probably haven’t given them an explicit size so the elements are as big as their content.
Thanks for the help Sam! Unfortunately, changing the icon sizes didn’t work for me. Instead I added “fa-fw” class to my Font Awesome icon elements. If I’m not wrong, “fa-fw” is specially for those who stack up some Font Awesome icons vertically. FW = Fixed Width.
How did you do it? fa-fw does nothing else than setting an explicit width and text-align: center so you could have done it on your own without additional Font Awesome classes. I guess that’s what the excercise was about: To use the CSS skills you have aquired so far.
I honestly think that my Font Awesome icons had different widths. (Earlier, I added 1px solid borders to see if the icons have same widths, and they didn’t.) So yeah, as you can see on the screenshot above, the problem was with the width of the icons. Not the “size”. (Figured it out later, I thought it was the size of the icons.) Anyway, now the problem is solved, moving on with the next tutorials. Thanks for helping me!
I used the term “size” deliberately because it’s not a CSS property name as width is so you had a chance to use the inspector and find the solution yourself.
