Custom Bullet Symbol for <Li> Elements in <Ul> That Is a Regular Character, and Not an Image

Custom bullet symbol for li elements in ul that is a regular character, and not an image

The following is quoted from Taming Lists:

There may be times when you have a list, but you don’t want any bullets, or you want to use some other character in place of the bullet. Again, CSS provides a straightforward solution. Simply add list-style: none; to your rule and force the LIs to display with hanging indents. The rule will look something like this:
ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}
Either the padding or the margin needs to be set to zero, with the other one set to 1em. Depending on the “bullet” that you choose, you may need to modify this value. The negative text-indent causes the first line to be moved to the left by that amount, creating a hanging indent.
The HTML will contain our standard UL, but with whatever character or HTML entity that you want to use in place of the bullet preceding the content of the list item. In our case we'll be using », the right double angle quote: ».
» Item 1

» Item 2

» Item 3

» Item 4

» Item 5 we'll make

a bit longer so that

it will wrap

Custom html bullet points not showing, only normal bullet points show not the custom image i put in

list-style-image must be defined for ul and the img source was not used correcly.

ul {
  list-style-position: inside;
  padding-left: 2rem;
  /*you probably do not need this*/
  /*list-style-type: !important;*/
  list-style-image: url("https://i.ibb.co/Tk59zVR/bullet-2.png");
}

ul li {
  padding-left: 2rem;
  /*you probably do not need this*/
  /*background-position: 0 0; */
  /*background-size: 0*/
}

<p class="section-subtitle">
  <ul>
    <li>Savings on running costs/in-house labour costs</li>
    <li>Allows you to stay focused on your core-business without distractions. </li>

    <li>Reduce risk – government regulations non-compliance fines</li>

    <li>Level the playing field – get access to the similar technology and expertise that big companies enjoy
    </li>
  </ul>
</p>

Unicode character as bullet for list-item in CSS

EDIT

I probably wouldn't recommend using images anymore. I'd stick to the approach of using a Unicode character, like this:

li:before {
  content: "\2605";
}

OLD ANSWER

I'd probably go for an image background, they're much more ~~efficient~~ versatile and cross-browser-friendly.

Here's an example:

<style type="text/css">
  ul {list-style:none;} /* you should use a css reset too... ;) */
  ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

The most common way to do this is something along these lines:

ul {  list-style: none;  padding: 0;  margin: 0;}
li {  padding-left: 1em;   text-indent: -.7em;}
li::before {  content: "• ";  color: red; /* or whatever color you prefer */}

<ul>  <li>Foo</li>  <li>Bar</li>  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li></ul>

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

You can use a pseudo-element to insert that character before each list item:

ul {  list-style: none;}
ul li:before {  content: '✓';}

<ul>  <li>this is my text</li>  <li>this is my text</li>  <li>this is my text</li>  <li>this is my text</li>  <li>this is my text</li></ul>

Customize list item bullets using CSS

You mean altering the size of the bullet, I assume? I believe this is tied to the font-size of the li tag. Thus, you can blow up the font-size for the LI, then reduce it for an element contained inside. Kind of sucks to add the extra markup - but something like:

li {font-size:omgHuge;}
li span {font-size:mehNormal;}

Alternately, you can specify an image file for your list bullets, that could be as big as you want:

ul{
  list-style: square url("38specialPlusP.gif");
 }

See: http://www.w3schools.com/css/css_list.asp

Custom Bullet Symbol for <Li> Elements in <Ul> That Is a Regular Character, and Not an Image