如何为<ul>标签内的<li>添加额外图标？附已尝试代码

方法1：直接在

内插入图标元素 #

这是最直观的方式，直接把图标标签放到

<div data-role="collapsible" data-theme="b" data-corners="true" data-inset="false" data-content-theme="c">
  <h1>Family & Identity<img src="Images/audio-icon.png" border="0" style="position: relative; left: 25px;" alt="With Audio"><span style="float: right;">179</span></h1>
  <ul data-role="listview" data-inset="true">
    <!-- 带额外图标的列表项示例 -->
    <li>
      <a href="#">
        <img src="Images/your-custom-icon.png" alt="Icon" class="extra-list-icon">
        我的家庭信息
      </a>
    </li>
    <li>
      <a href="#">
        <img src="Images/another-icon.png" alt="Icon" class="extra-list-icon">
        身份认证设置
      </a>
    </li>
  </ul>
</div>

搭配CSS控制图标样式：

.extra-list-icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  /* 若想把图标放右侧，替换成下面的样式 */
  /* float: right;
  margin-left: 12px; */
}

方法2：利用jQuery Mobile内置图标系统 #

jQuery Mobile自带一套图标类，如果你想用内置图标或者自定义图标，也可以这么写：

<li>
  <a href="#">
    隐私设置
    <span class="ui-icon ui-icon-lock extra-icon-right"></span>
  </a>
</li>

用CSS调整图标位置，避开默认的列表箭头：

.extra-icon-right {
  position: absolute;
  right: 40px; /* 避开默认箭头的位置 */
  top: 50%;
  transform: translateY(-50%);
}

方法3：CSS伪元素（无需修改HTML结构） #

如果不想改动现有HTML，可以用伪元素统一给所有列表项加图标，也支持单独定制：

/* 给所有列表项右侧加统一图标 */
.ui-listview li a::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url('Images/default-icon.png');
  background-size: cover;
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
}

/* 给特定列表项加不同图标 */
.ui-listview li.special-item a::after {
  background-image: url('Images/special-icon.png');
}

小提示 #

• 调整右侧图标位置时，记得避开jQuery Mobile列表项默认的箭头图标（默认在最右侧），所以right值要大于箭头的默认位置
• 确保图标文件路径正确，避免出现404错误
• 如果需要动态控制图标显示/隐藏，也可以结合JavaScript给
• 添加/移除类来实现

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