CODEWITHSUNDEEP
htmlcss
Praff
Praff

Reputation: 129

add fill circle with checkmark using css

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

enter image description here

If anyone have idea then let me know.

Upvotes: 2

Views: 6378

Answers (2)

ajay 24
ajay 24

Reputation: 329

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>

Upvotes: 2

Timothy Alexis Vass
Timothy Alexis Vass

Reputation: 2705

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);

Upvotes: 4

Related Questions