欢迎 Web Awesome，这是最大最好的开源 Web 组件库。

列表中的图标

利用固定宽度样式的力量，我们在处理使用图标作为装饰性项目符号的 HTML 列表时添加了一些实用程序样式。

我们将介绍如何在无序列表中使用图标替换默认项目符号的基础知识，并介绍用于自定义 CSS 属性的选项。

使用 fa-ul 和 fa-li 替换无序列表中的默认项目符号。

列表图标可以
用于
替换项目符号
在列表中

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>Listicons can</li>
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>be usedto</li>
  <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="fa-regular fa-square"></i></span>in lists</li>
</ul>

您也可以在幕后保留有序列表的语义，但在视觉上使用图标项目符号。

列表图标可以
用于
替换项目符号
在列表中

<ol class="fa-ul">
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>Listicons can</li>
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>be usedto</li>
  <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="fa-regular fa-square"></i></span>in lists</li>
</ol>

列表类

类	详细信息
`fa-ul`	用于 `<ul>` 或 `<ol>` 元素以将图标样式化为列表项目符号
`fa-li`	用于单个 `<li>` 元素以将图标样式化为列表项目符号

自定义

我们添加了 CSS 自定义属性以使自定义更轻松、更高效。为以下属性定义您自己的值以覆盖和自定义 Font Awesome 的默认值。

CSS 自定义属性	详细信息	接受的值
`--fa-li-margin`	设置图标周围的边距	任何有效的 CSS `margin` 值
`--fa-li-width`	设置图标的宽度	任何有效的 CSS `width` 值

列表图标可以
用于
替换项目符号
在列表中

<ul class="fa-ul" style="--fa-li-width: 2em;">
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>Listicons can</li>
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>be usedto</li>
  <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li" style="--fa-li-width: 4em;"><i class="fa-regular fa-square"></i></span>in lists</li>
</ul>

列表图标可以
用于
替换项目符号
在列表中

<ul class="fa-ul" style="--fa-li-margin: 1em;">
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>Listicons can</li>
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>be usedto</li>
  <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li" style="--fa-li-margin: 2em;"><i class="fa-regular fa-square"></i></span>in lists</li>
</ul>