add fill circle with checkmark using css

Question

I want to add fill circle with with checkmark before li elements. But cant get how to do that. anyone know then let me know.

<ul class="my-work" style = "list-style-type: none;">
  <li>Sheets that stay securely in place</li>
  <li>Boxer elastic corner construction</li>
  <li>Unique corner stitching creates snug fit</li>
  <li>Self adjusts to fit mattresses from 7”-18” deep</li>
</ul>

Please check attached img

If anyone have idea then let me know.

Answer 1

You can use different font-family for one which has a check-mark to your liking.

 .circle-checkmark { font-family: sans-serif; background: lightblue; color: white; padding: 1px 4px; border-radius: 50%; } ul { list-style-type: none; } li { margin: 4px 0; } li::before { font-family: sans-serif; content: "✔"; color: white; display: inline-block; width: 1em; background: lightblue; padding-left: 3px; border-radius: 50%; margin-right: 1em; }

 <h2>Regular checkmark</h2> <span class="circle-checkmark">✓</span> <h2>Heavy checkmark</h2> <span class="circle-checkmark">✔</span> <h2>Something like this can also work</h2> <ul> <li>first</li> <li>second</li> </ul>

Another option is to use an image and list-style-image: url(/path/image.png);

Answer 2

Update: I have added bootstrap check icon https://icons.getbootstrap.com/icons/check-lg/

 .check-icon{ display: flex; justify-content: center; align-items: center; height: 25px; width: 25px; color: #fff; background: #89CFF0; border-radius:50%; margin-right:10px; } li{ margin:10px } svg{ height:15px;width:15px }

 <ul class="my-work" style = "list-style-type: none;"> <li style='display: flex'><span class="check-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16"> <path d="M13.485 1.431a1.473 1.473 0 0 1 2.104 2.062l-7.84 9.801a1.473 1.473 0 0 1-2.12.04L.431 8.138a1.473 1.473 0 0 1 2.084-2.083l4.111 4.112 6.82-8.69a.486.486 0 0 1.04-.045z"/> </svg> </span> Self adjusts to fit mattresses from 7”-18” deep</li> </ul>