如何用CSS调整网页列表中勾选图标的大小？

作为新手，你可以根据图标的类型用下面几种简单方式调整：

1. 图标是<img>标签 #

这是最常见的情况，直接设置宽高即可：

• 快速写法（直接加在标签上）：

<img src="你的勾选图标路径" style="width: 20px; height: auto;" alt="勾选">

height: auto是为了保持图标比例，避免变形，你可以把20px改成你想要的大小。

• 更规范的写法（用CSS类）：
  先在样式里定义类：

.check-icon {
  width: 20px;
  height: auto;
}

然后给img标签加类：

<img src="你的勾选图标路径" class="check-icon" alt="勾选">

2. 图标是背景图（比如放在div/span里） #

如果图标是作为元素的背景图，用background-size调整：

.check-item {
  width: 20px;
  height: 20px;
  background-image: url("你的勾选图标路径");
  background-size: contain; /* 让图标完整显示，不拉伸变形 */
  background-repeat: no-repeat;
}

然后HTML里用这个类：

<div class="check-item"></div>

3. 图标是字体图标（比如Font Awesome） #

字体图标本质是文字，直接修改font-size就行：

.check-icon {
  font-size: 20px;
  /* 还能顺便改颜色：color: #2ecc71; */
}

HTML示例（以Font Awesome的勾选图标为例）：

<i class="fa fa-check check-icon"></i>

你只需要把上面的20px换成你觉得合适的数值，慢慢调到你想要的大小即可。

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