LIST ELEMENTS, EDITING BULLETS
Hello, I'm quite new and I wonder how can make layout from picture below into the one below it. Main question is how to align text height with bullet svg and add spacing between bullet and text
4 Replies
oh and how to change svg color to white, originally it was black and pink
If you use a ul/li you can use the :marker pseudo class. As for svgs it depends how you’ve brought them in. If they are inline (in your markup) you can change the fill/stroke from your css. You can also give it a custom property scoped to the parent to better keep organized. If it’s a linked file you’ll have to go into that file and change the fill and stroke.
Hey, I'm a bit on the new side as well not sure if I can help but I recently made something that used SVG icons that I needed to align with text to the right of it and I used flexbox for that.
display: flex;
justify-content: space-between;
align-items: center;
Yes flex would work if they are two separate elements but you probably don’t want justify-content: sb; probably just want a gap. To align all the elements correctly the item holding the svg must be the same width or you’ll have an svg that is eg 20px wide and underneath it that svg may be 10px wide so if you want the text to align on the left at the same point it’s something to consider. I do like :markers for this personally so they line up but flex/grid are some of the best tools we have to align vertically