如何控制列表自定义图标大小？CSS列表样式设置求助

你的HTML结构 #

<ul id="AB1C2D">
    <li id="AB1C2D1">Dashboard</li>
    <li id="AB1C2D2">Mechanics</li>  
    <li id="AB1C2D3">Individuals</li>
    <li id="AB1C2D4">Settings</li>
    <li id="AB1C2D5">Messages</li>  
    <li id="AB1C2D6">Support</li>
    <li id="AB1C2D7">Logout</li>
</ul>

你遇到的问题 #

• 用background属性设置图标时，仅显示框状背景，图标不出现
• 用list-style-image时，图标尺寸过大，导致列表项间距异常

方法一：修复background方案（简单直接） #

先解决图标不显示的问题，再精准控制尺寸：

#AB1C2D li {
    /* 移除默认列表圆点，避免干扰背景图显示 */
    list-style: none;
    /* 左侧留空，给图标腾出位置 */
    padding-left: 20px;
    /* 设置背景图：路径、位置、不重复 */
    background: url("img/piz.png") left center no-repeat;
    /* 直接控制图标大小，按需调整数值 */
    background-size: 16px 16px;
    /* 行高匹配图标高度，保证文字与图标垂直居中 */
    line-height: 24px;
}

关键说明： #

• 图标不显示大概率是路径错误：检查img/piz.png与CSS文件的相对路径是否正确，如果CSS在css/文件夹下，路径需改为../img/piz.png；也可以用绝对路径（如/img/piz.png）测试
• background-size是控制图标尺寸的核心，直接设置宽高即可实现自定义大小

方法二：::before伪元素方案（更灵活可控） #

这种方式能完全掌控图标的大小、位置，彻底摆脱默认列表样式的限制：

#AB1C2D li {
    list-style: none;
    position: relative;
    padding-left: 20px;
    line-height: 24px;
}

#AB1C2D li::before {
    content: "";
    display: inline-block;
    /* 自定义图标尺寸 */
    width: 16px;
    height: 16px;
    /* 定位到列表项左侧，垂直居中对齐 */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    /* 背景图自适应容器，避免变形 */
    background: url("img/piz.png") center/cover no-repeat;
}

关键说明： #

• 伪元素相当于独立的图标容器，直接设置width和height就能精准控制图标大小
• transform: translateY(-50%)确保图标与文字完美垂直对齐

你之前方案失效的原因 #

1. 第一种background方案：未移除默认list-style，可能遮挡背景图；且未设置background-size，若图片本身过大则会显示不全；路径错误是最常见的诱因
2. 第二种list-style-image方案：该属性无法直接控制图标尺寸，会强制使用图片原始大小，且默认列表样式会干扰间距，不适合做尺寸可控的自定义图标

内容的提问来源于stack exchange，提问作者Isesele Victor