How to Set Custom Bullet Image of Li Tag

how can i set custom bullet image of li tag?

Here's one method that I tend to lean on. Add a before to the li, size it as required and add a background image to it.

Then just sprinkle some flexbox on to stop the text wrapping underneath the bullet.

I made a quick jsfiddle to demonstrate it

li {
    display: flex;
    align-items: center;
    margin: 10px 0;

    line-height: 30px;

    list-style: none;
}

li:before {
    display: block;
    flex-shrink: 0;
    width: 33px;
    height: 33px;
    margin-right: 10px;

    vertical-align: middle;

    background: url('https://image.flaticon.com/icons/png/128/1168/1168671.png') no-repeat left center;
    background-size: contain;

    content: '';
}

replace bullet point in li with image specified in respective post

To make your CSS style sheet use the markdown, you need to include it inside the HTML templates.

insert once inside your template the rule(s) you want to update on the fly (best is to insert inside <head>, but anywhere else will work

<style>
.posts {
  list-style-image: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}");
}
</style>

instead

<img src="{{ with .Params.thumbnail }}{{ . }}{{ end }}">

Best is to read about the template tutorial from blogdown

https://bookdown.org/yihui/blogdown/templates.html#a-minimal-example
The partials/ directory is the place to put the HTML fragments to be reused by other templates via the partial function. We have four partial templates under this directory:
header.html main defines the <head> tag and the navigation menu in the <nav> tag.

if you read further, you can see that the {{ partial "head_custom.html" . }} is the file (head_custom.html) where you might insert

<style>
.posts {
  list-style-image: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}");
}
</style>

CSS list bullet custom image size

You can do this two ways Do whatever suits you best. I hope that what you wanted.

Using background property

You need to do background and your image url.

ul {
  list-style: none;
  width: 100%;
}

ul li::before {
  filter: invert(54%) sepia(69%) saturate(7490%) hue-rotate(182deg) brightness(100%) contrast(83%);
  margin-right: 5px;
  display: inline-block;
  width: 16px;
  height: 16px;
  content: "";
  background: url("https://toppng.com/uploads/preview/location-png-icon-location-icon-png-free-11562933803vththezlcl.png");
  background-size:20px 20px;

}

li {
  display: list-item;
}

<div class="benefits">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
  </ul>
</div>

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

How can I give each li its own bullet image?

First determine whether you are in "quirks" mode or not, because for many CSS properties it makes a difference.

Secondly, the W3c specifies that the URL should be in double quotes (although I don't use the quotes, either). Go with the spec to save yourself trouble down the line.

If you are specifying "strict" in your DOCTYPE, then the browser may require the double quotes, per the standard.

Make Custom Bullet Image Part of Clickable Link

I not sure if you try this way move the background-image in <a>

#navlist {
    list-style: none;
    margin: 0;
    padding: 20px 0 0px 20px;
}

#navlist ul {
    margin: 0;
    padding: 0;
}

#navlist li {
    display:inline;

}

#navlist li a {
    text-decoration:none;
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding: 3px 0 3px 35px;
    margin: 0 20px 0 .4em;
}

#navlist li.contact a{
    background-image: url(img/contact.png);
}

#navlist li.about a{
    background-image: url(img/about.png);
}

working demo
hope this help

Center custom bullets of a ul

Instead of using list-style you can use a background image and position it correctly. Like so:

li {
  list-style-type: none;
  background-image: url('newBullet.svg');
  background-repeat: no-repeat;
  background-position-y: center;

  padding-left: 20px;
}

Example: https://jsfiddle.net/o2wyj5ey/

Multiline

If your listitem has multiple lines you can absolutely position them like this:

li {
  list-style-type: none;
  background-image: url('http://www.w3schools.com/css/sqpurple.gif');
  background-repeat: no-repeat;
  background-position-y: 3px;

  padding-left: 20px;
}

Example: https://jsfiddle.net/o2wyj5ey/1/

Is it possible to use custom text for the li tag bullet?

Do you mean "can I use some text instead of a bullet point or an image"?

if so, the css :before pseudo-element can help:

li {
  list-style-type: none;
}

li:before {
  content: '* ';
}

Obviously replace "* " with your choice of text.

You can use normal CSS on the :before element to style as you like. For example:

li:before {
  content: '> ';
  font-family: 'wingdings';
  font-weight:  bold;
}

You could get scalable graphics by combining this technique with an SVG font like Font Awesome.