如何在HTML列表项右侧添加Font Awesome下拉箭头图标

一、图标不显示的原因及修复 #

你用的fa-light是Font Awesome Pro专属类名，免费版不支持，且大概率未正确引入Font Awesome资源。按以下步骤修改：

• 1. 在HTML的<head>中添加免费版Font Awesome的CDN资源：

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  

• 2. 将图标类名替换为免费版支持的样式，比如用fa-solid fa-chevron-down替代fa-light fa-arrow-down。

二、实现下拉菜单+右侧图标效果 #

要让图标固定在列表项右侧，同时实现点击展开/收起子菜单的功能，需要调整HTML结构并补充CSS样式，配合简单JS实现交互。

完整代码示例 #

HTML

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<div class="container-fluid">
  <div class="sec3">
    <ul class="sec2drop">
      <!-- 可展开的主列表项 -->
      <li class="dropdown-item">
        <span>Prepare for a language exam</span>
        <i class="fa-solid fa-chevron-down dropdown-icon"></i>
        <!-- 子菜单默认隐藏 -->
        <ul class="submenu">
          <li>Mock tests</li>
          <li>Vocabulary drills</li>
          <li>Speaking practice</li>
        </ul>
      </li>
      <li>Hungarian for kids</li>
      <li>Take on a challenge</li>
      <li>Translation services</li>
    </ul>
  </div>
</div>

CSS

.container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30vw;
  background-image: url(pictures/output-onlinepngtools.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  word-break: keep-all;
  border: 2px solid rgb(68, 115, 216);
  padding-left: 20px;
  padding-right: 100px;
}

.container-fluid h1 {
  margin: 0;
  line-height: calc(30vw / 3);
}

.sec2drop {
  padding: 0;
  margin: 0;
}

.sec2drop li {
  list-style: none;
  border-top: 1px solid rgb(161, 159, 159);
  line-height: 50px;
  padding: 0 10px;
  position: relative;
}

/* 图标固定在列表项右侧 */
.dropdown-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s; /* 展开时箭头旋转动画 */
  cursor: pointer;
}

/* 子菜单默认隐藏 */
.submenu {
  max-height: 0;
  overflow: hidden;
  padding-left: 20px;
  transition: max-height 0.3s;
}

/* 点击后展开子菜单并旋转箭头 */
.dropdown-item.active .submenu {
  max-height: 200px; /* 根据子项数量调整高度 */
}

.dropdown-item.active .dropdown-icon {
  transform: translateY(-50%) rotate(180deg);
}

点击交互JS（放在HTML末尾）

// 给可展开项绑定点击事件，切换展开/收起状态
document.querySelectorAll('.dropdown-item').forEach(item => {
  item.addEventListener('click', () => {
    item.classList.toggle('active');
  });
});

三、不用Font Awesome的替代方案 #

如果不想依赖Font Awesome，可通过CSS伪元素实现箭头效果：

/* 用伪元素替换Font Awesome图标 */
.dropdown-item::after {
  content: '▼';
  font-size: 14px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s;
  cursor: pointer;
}

.dropdown-item.active::after {
  transform: translateY(-50%) rotate(180deg);
}

对应的HTML中直接删除<i>标签，保留.dropdown-item类即可。

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