Icons seem to be stacking in my CSS Grid row

Icons seem to be stacking in my CSS Grid row
0

#1

I have three FA icons in the one row of my CSS Grid.
The arent lining up across and seem to be stacking.

no bootstrap so what I know wouldn’t work.
Easy fix?
https://codepen.io/AmericanPi/pen/JZWBRG

*I have some troubles with class and id hierarchy so my css might be making causing this formatting.


#2

Your icons aren’t stacking, they simply don’t exist.

There’s no fontawesome icon with the name of fa-camera-pdf or fa-camera-square. The only existing free options on fontawesome are fa-camera-retro and fa-camera.


#3

I JUST REALIZED THAT!!!
:laughing:
Check it out now.
I also cleaned up my div

But they’re still stacking. I think it has to do with the centering of #content


#4

Should I change my css or my html?


#5

You want them to be displayed side by side?

If that’s the case, I would add an ID to the div that contains the icons (The outer one), and set its css to:

display: flex;
flex-direction: row;
justify-content: space-around;

#6

okay. I was playing with id attr’s but nothing like all that flex stuff.
leme check it out.
tx @catanineto


#7

sooooo. are you creating a flexbox there?
I’m asking because it’s interesting to note if i did that using CSS grid (more code than ur snippet) i would create a nested grid which I would have to place and all kinds of jazz. So this seems better for this instance.

But I feel like wrong using flexboxes in grid… but i guess it’s all CSS so it’s cool?


#8

Yes, that div is being turned into a flexbox, it’s content are being distributed horizontally (flex-direction: row), and the spacing of the content is set so that the space-around every element is equal (justify-content: space-around).

I kinda suck at explaning, hope you understood what I meant.


#9

But I feel like wrong using flexboxes in grid… but i guess it’s all CSS so it’s cool?

Grids and Flexbox can work together just fine, if possible, give this article a read:


#10

yea that was good. I only mentioned that because I saw

display: flex; 

and that’s how you create a grid too.
thanks for that article too…