Is there a way to add margin or padding to list style images?

Question

I am trying to create a webpage.In the footer of the page I have a lists.My code displays the first image whereas it should look like the second image.

What I have coded

What it Should look like

For the code You can see it from github repository : "https://github.com/nganbarova/Huddle.git"

Answer 1

For an accurate answer, I need to see your code first, but there are some general recommendations for you. if you are using font-awesome you can simply add this to your stylesheet file:

li i { margin-right:5px; } or li fa { margin-right:5px; }

If you are using an image as an icon use this one:

li img { margin-right:5px }

You can change the property value of the margin to any value that works fine for you.

Answer 2

I'd recommend you use different classes for each LI item and then make use of the ::before pseudoelement. You can then style and move that wherever you need to.

li {
  position: relative;
}

li.myClass::before {
 content: url('image.png');
 position: absolute;
 top: 0;
 left: 0;
 width: 20px;
 height: 20px;
}

Answer 3

You haven't shown your code, so I'll give you generic and easy to understand methods for indenting. But it would be much more efficient if you pasted your code here.

1 Method using flex:

For the parent container (within which there are points) you specify the exact height and flex rules. These items will be distributed evenly across the container:

parent_selector {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 500px;
}

2 Method using grid:

Grid has a grid-gap rule that sets the spacing without affecting the first element:

parent_selector {
  grid-gap: 10px;
}

3 Method using margin and pseudo-class :not and :first-of-type:

Using the :not and :first-of-type pseudo-classes together will allow you to indent every inner element except the first element.

parent_selector p:not(:first-of-type) {
  margin-top: 10px;
}

All of these methods are easy to use, but it would be better if you showed your code. If you have any questions, write here in the comments.