Change Bullets in styled list in CSS

Question

I am trying to achieve this style in my <ul>:

I have used the list-style-image in CSS, but, I a being able to align the text after image. How can I do that? Here is the picture of the current output:

Here is my code:

#engineering-features {
  li {
    list-style-image: url(../img/engineering/li.png);
    font-size: 1.2rem;
  }
}

There is a similar question in Stack Overflow, the most upvoted solution in that question didn't solve my issue.

Add image in pseudo element and using ```line-height``` or ```display:inline-block;vertical-align:middle;``` — Rayees AC, Aug 11 '20 at 15:49
*the most upvoted solution in that question didn't solve my issue.* --> you are required to consider *all* the answers — Temani Afif, Aug 11 '20 at 19:46
Can you explain _how_ the solution you refer to did not solve your issue? Merely stating that something is not a duplicate does not in itself make it not a duplicate. — halfer, Aug 14 '20 at 21:22

score 1 · Accepted Answer · answered Aug 11 '20 at 15:49

1

Use some padding and line-height: Change my values as what suits your layout.

li {
    list-style-image: url(../img/engineering/li.png);
    font-size: 1.2rem;
    padding-left: 30px;
    line-height: 31px;
  }

answered Aug 11 '20 at 15:49

Jawad

148
8

Allmost solved my issue. Still the text is a bit below the image. Is there anything I can do to move the text a bit up? – raymond-redd Aug 11 '20 at 15:58
thanks man if it works then accept my answer, for text a bit up try to adjust the line-height. or check if there is any other margin is affecting the result. margin: 0; – Jawad Aug 11 '20 at 16:30

Change Bullets in styled list in CSS

1 Answers1