[分享]css初始化后li小图标

 CSS 初始化后如何设置 li 小图标？在网页开发中，经常会使用无序列表（ul）或有序列表（ol）来呈现一系列信息。而列表项（li）中的小图标则是让列表更加美观和易读的细节之一。在 CSS 初始化的...

 CSS 初始化后如何设置 li 小图标？
在网页开发中，经常会使用无序列表（ul）或有序列表（ol）来呈现一系列信息。而列表项（li）中的小图标则是让列表更加美观和易读的细节之一。在 CSS 初始化的过程中，我们有时会发现列表项中的小图标没有显示出来，这该怎么解决呢？
解决方法如下：
在 CSS 初始化文件中，我们通常会重置一些元素的默认样式，例如：

css
/* 重置 ul 和 ol 的默认样式 */
ul, ol {
  padding: 0;
  margin: 0;
  list-style: none;
} 

其中的 `list-style` 属性是用来设置列表项的小图标的。它有三个值可选，分别是 `disc`（实心圆点）、`circle`（空心圆）和 `square`（实心方块）。如果我们不想让列表项显示小图标，可以将其设置为 `none`，例如：

css
/* 去掉列表项的小图标 */
li {
  list-style: none;
} 

如果我们想在列表项中显示自定义的小图标，可以使用 CSS 中的 `background-image` 属性，例如：

css
/* 在列表项中显示自定义的小图标 */
li {
  list-style: none;
  background-image: url('icon.png');
  background-repeat: no-repeat;
  background-position: 5px center;
  padding-left: 20px; /* 让文本内容离图标有一定的距离 */
} 

上述代码中，`background-image` 属性指定了要显示的小图标文件路径；`background-repeat` 属性控制图标是否重复显示；`background-position` 属性指定了图标在背景中的位置；最后的 `padding-left` 属性用来让文本内容离小图标有一定的距离。
总的来说，列表项中的小图标并不难设置，我们可以根据实际需求对 `list-style` 和 `background-image` 属性进行灵活的调整，以达到最佳效果。