为何Bootstrap左侧导航的fa-caret-up/fa-caret-down图标不显示？

问题原因分析 #

你的代码存在两个核心问题导致图标无法正常显示：

• 未引入Font Awesome资源：fa-caret-down、fa-caret-up这类图标类属于Font Awesome图标库，必须引入其CSS文件才能渲染出对应图标；
• 图标载体与样式缺失：使用<div>标签承载图标不符合Font Awesome的常规用法，且.right类未定义样式，影响图标排版逻辑。

修复步骤与完整代码 #

1. 补充Font Awesome资源引入 #

在页面<head>区域添加Font Awesome的CSS CDN链接：

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

2. 调整图标标签与样式细节 #

将承载图标的<div>替换为<i>（Font Awesome官方推荐标签），并补充.right类的基础样式以优化排版。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入Font Awesome图标库 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 
  <style>
  
  nav {
    position: relative;
    margin: 50px;
    width: 360px;
    background-color: black;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    
}
nav ul li a {
    display: block;
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
    transition: 0.2s linear;
    
}
nav ul li a:hover {
    background: #1d4f71;
    color: #fff;
}
nav ul li a .fa {
    width: 16px;
    text-align: center;
    margin-right: 5px;
    float:right;
}
/* 补充.right类样式，优化图标与文字间距 */
.right {
    margin-left: 8px;
}
nav ul ul {
    background: rgba(0, 0, 0, 0.2);
}
nav ul li ul li a {
    border-left: 4px solid transparent;
    padding: 10px 20px;
}
nav ul li ul li a:hover {
    border-left: 4px solid #3498db;
}
</style>
</head>
<body>

<nav class='animated bounceInDown '>
    <ul>
        <li><a href='#profile'>Profile</a></li>
        <li><a href='#message'>Messages</a></li>
        <li class='sub-menu'><a href='#settings'>Settings<i class='fa fa-caret-down right'></i></a>
            <ul>
                <li><a href='#settings'>Account</a></li>
                <li><a href='#settings'>Profile</a></li>
                <li><a href='#settings'>Security & Privacy</a></li>
                <li><a href='#settings'>Password</a></li>
                <li><a href='#settings'>Notification</a></li>
            </ul>
        </li>
        <li class='sub-menu'><a href='#message'>Help<i class='fa fa-caret-down right'></i></a>
            <ul>
                <li><a href='#settings'>FAQ's</a></li>
                <li><a href='#settings'>Submit a Ticket</a></li>
                <li><a href='#settings'>Network Status</a></li>
            </ul>
        </li>
        <li><a href='#message'>Logout</a></li>
    </ul>
</nav>

 <script>
      $('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
    $(this).parent(".sub-menu").children("ul").slideToggle("100");
    $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
 </script>
</body>
</html>

修复效果说明 #

• 引入Font Awesome CSS后，fa-*类会被正确识别并渲染出上下箭头图标；
• 替换为<i>标签符合图标库使用规范，避免不必要的样式冲突；
• 补充的.right类样式让图标与文字间距更合理，提升菜单视觉体验。

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