How do I put an icon beside a div with text?

HTML-CSS
1

Hi everyone,

I’m recreating a landing page (originally made with Wix) of a product I created and launched on Kickstarter. I’m having trouble placing the icons of the product spotlight section of the page (the section which reads " Little cable. Big convenience.".

https://arontolentino.github.io/fcc-product-landing-page/

Do any of you have a solution for this?

Thanks!

2

In CSS you can put z-index: -1; for that class I guess
Try once

3

You want the icon on the left of the text right?

You can make .spotlight-feature a flex container.

.spotlight-feature {
  padding: 1.75rem 1.75rem;
  display: flex;
}

And then add some margin to the icons.

.spotlight-feature i {
  margin-right: 10px;
  margin-top: 3px;
}

Not sure where you want the vertical alignment on the icons. But the top is probably the best.

2 Likes
4

One super simple option off the bat is to use floats. So place a class on each of your icons (I used “icons” in my example) and then add this to your stylesheet:

.icons{
float: left;
padding-right: 0.5vw;
}
1 Like
5

Wow. This did the trick! You are brilliant.

I based this off of your solution:

.spotlight-feature {
    padding: 1.75rem 0;
    display: flex;
    align-items: center; 
}

.spotlight-icon {
    text-align: center;
    margin-right: 10px;
    font-size: 2.5rem;
    text-align: center;
    width: 20%;
}

.spotlight-text {
    width: 80%;
}

Updated site: https://arontolentino.github.io/fcc-product-landing-page/

6

Great simple solution! I gave this a try and it worked but I was trying to stick to using flexbox for most of the CSS positioning.

Appreciate your help!

1 Like