使用 css 添加帶有復選標記的填充圓

Question

我想在 li 元素之前添加帶有復選標記的填充圓圈。 但無法得到如何做到這一點。 任何人都知道然后讓我知道。

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

請檢查附件的img

如果有人有想法，請告訴我。

Answer 1

您可以對帶有您喜歡的復選標記的字體使用不同的字體系列。

 .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>

另一種選擇是使用圖像和list-style-image: url(/path/image.png);

Answer 2

更新：我添加了引導檢查圖標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>