How to use tick checkmark symbol instead of bullets in unordered list

Question

I have a list where I want to add tick symbol before list text  Is there any CSS that can help me to apply this way     this is my text   this is my text   this is my text   this is my text   this is my text   this is my text   Note  I want this in this type of HTML code   x000D   x000D   lt ul gt  x000D     lt li gt this is my text lt  li gt  x000D     lt li gt this is my text lt  li gt  x000D     lt li gt this is my text lt  li gt  x000D     lt li gt this is my text lt  li gt  x000D     lt li gt this is my text lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

Here are three different checkmark styles you can use:

_x000D_

ul:first-child  li:before { content:"\2713\0020"; }  /* OR */_x000D_
ul:nth-child(2) li:before { content:"\2714\0020"; }  /* OR */_x000D_
ul:last-child   li:before { content:"\2611\0020"; }_x000D_
ul { list-style-type: none; }

_x000D_

<ul>_x000D_
  <li>this is my text</li>_x000D_
  <li>this is my text</li>_x000D_
  <li>this is my text</li>_x000D_
  <li>this is my text</li>_x000D_
  <li>this is my text</li>_x000D_
</ul>_x000D_
_x000D_
<ul>_x000D_
  <li>this is my text</li>_x000D_
  <li>this is my text</li>_x000D_
  <li>this is my text</li>_x000D_
  <li>this is my text</li>_x000D_
  <li>this is my text</li>_x000D_
</ul>_x000D_
_x000D_
<ul><!-- not working on Stack snippet; check fiddle demo -->_x000D_
  <li>this is my text</li>_x000D_
  <li>this is my text</li>_x000D_
  <li>this is my text</li>_x000D_
  <li>this is my text</li>_x000D_
  <li>this is my text</li>_x000D_
</ul>

_x000D_

jsFiddle

References:

User · Answer

lt ul gt     lt li gt this is my text lt  li gt     lt li gt this is my text lt  li gt     lt li gt this is my text lt  li gt     lt li gt this is my text lt  li gt     lt li gt this is my text lt  li gt   lt  ul gt    you can use this simple css style  ul        list-style-type    2713

User · Answer

You can use a pseudo-element to insert that character before each list item    x000D   x000D  ul   x000D    list-style  none  x000D    x000D   x000D  ul li before   x000D    content       x000D    x000D   lt ul gt  x000D     lt li gt this is my text lt  li gt  x000D     lt li gt this is my text lt  li gt  x000D     lt li gt this is my text lt  li gt  x000D     lt li gt this is my text lt  li gt  x000D     lt li gt this is my text lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

As an addition to the solution   ul li before    content            You can use any SVG icon as the content  such as the Font Aswesome      x000D   x000D  ul   x000D    list-style  none  x000D    padding-left  0  x000D    x000D  li   x000D    position  relative  x000D    padding-left  1 5em      space to preserve indentation on wrap    x000D    x000D  li before   x000D    content          placeholder for the SVG    x000D    position  absolute  x000D    left  0      place the SVG at the start of the padding    x000D    width  1em  x000D    height  1em  x000D    background  url  data image svg xml utf8  lt  xml version  1 0  encoding  utf-8   gt  lt svg width  18  height  18  viewBox  0 0 1792 1792  xmlns  http   www w3 org 2000 svg  gt  lt path d  M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z   gt  lt  svg gt    no-repeat  x000D    x000D   lt ul gt  x000D     lt li gt this is my text lt  li gt  x000D     lt li gt this is my text lt  li gt  x000D     lt li gt This is my text  it s pretty long so it needs to wrap  Note that wrapping preserves the indentation that bullets had  lt  li gt  x000D     lt li gt this is my text lt  li gt  x000D     lt li gt this is my text lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Note  To solve the wrapping problem that other answers had    we reserve 1 5m ems of space at the left of each  lt li gt  then position the SVG at the start of that space  position  absolute  left  0    Here are more Font Awesome black icons   Check this CODEPEN to see how you can add colors and change their size

[css] How to use tick / checkmark symbol (?) instead of bullets in unordered list?

jsFiddle

Examples related to css

Examples related to html

Examples related to special-characters