通过图片的方式也能实现，就像下面这样：
li{
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}
但是，有一种优雅的方法来自定义li的项目符号颜色和图标，而不需要图片，扩展性更好
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 1em;
text-indent: -.7em;
}
li::before {
content: "• "; /* 自定义图标，也可以使用字体图标 如：content: "\f105"; font-family: FontAwesome;*/
color: #ABCDEF; /* 自定义颜色 */
}
通过图片的方式也能实现，就像下面这样： 但是，有一种优雅的方法来自定义li的项目符号颜色和图标，而不需要图片，扩展性更好
前几天测试人员测试项目的时候提出要把echarts toolbox的图标修改为自定义图标（有背景颜色的那种）。由于...
* 视觉设计 动画、颜色、深色模式、半透明、字体 * 图标和图像 图像尺寸和分辨率、应用程序图标、自定义图标、多项...
内置图标和项目文件图标有变化，可以轻松地按形状和颜色识别不同类型的文件。 内置图标.jpg 项目文件图标.jpg ...
1、内置图标和项目文件图标有变化 ，可以轻松地按形状和颜色识别不同类型的文件 。 内置图标 项目文件图标 新建的 ...
实现自定义窗口的同时实现项目.exe图标，任务栏图标，点击任务栏实现最小化，最大化。我们这的流程是先UI界面再事件...
1、css ul li 如何实现 横向排列
fontawesome图标提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ，颜色，阴影。 Font ...
li {list-style-type:符号名称} css中用list-style-type指定列表（lists）...
【CSS】特殊符号content编码及作为字体图标使用方法 使用方法 前端最常用符号 图标形状十进制十六进制形状图...
本文标题：css实现自定义li项目符号颜色和图标
本文链接：https://www.haomeiwen.com/subject/yxxejxtx.html
网友评论