在CSS中制作自定义项目符号

Question

I have a list of student links that leads to their profile, so instead of the normal circular bullet points, I wanted smiley faces. The picture is 14x14. What can I do to make the bullets show up using only CSS?

ul {
  list-style-type:url(smiley.tiff);
  text-transform:capitalize;
}

Answer 1

Use a CSS background. list-style-image does not give you positioning options and often looks awful. Adjust the pixel values accordingly for your layout.

li.icon {
     background-image:url(...);
     background-repeat:no-repeat;
     background-position:3px 3px;
     min-height:16px;
     padding-left:20px;
}

BTW - don't use a TIFF (and TIFF is not supported by all browsers), the file will likely be HUGE. Covert it to a PNG.

Answer 2

Use the list-style-image CSS rule instead. And also, surround the url in quotes just in case; most browsers interpret it correctly without them, but it's good practice.

list-style-image: url('smiley.tiff');

Answer 3

The easiest way this can be done is by setting:

ul { 
  list-style-image: url(‘images/sample-bullet.png’)
}

This way you can choose any image you want. There is a great article about bullet styles I think you could benefit from here .

Answer 4

只是简单地使用awesome字体，使list-style：none并使用字体令人敬畏的图标简单Happy Coding：D