求助：用JavaScript添加Font Awesome<i>标签图标失败怎么办？

核心问题分析 #

• 文本覆盖图标：代码中先把<i>标签添加到div，随后用div.innerText = ...设置文本，这会直接清空div内所有已有内容（包括刚插入的图标标签），导致图标被覆盖。
• 类名格式错误：第一个导航项的item_Class里fa -house包含多余空格，正确的类名应该是fa-house，空格会导致Font Awesome无法识别图标类。

修正后的代码 #

JavaScript代码

// Add side navbar
let left_navbarList = [
    {
        name: "Home",
        item_Class: "fa-solid fa-house", // 修正多余空格
    },
    {
        name: "Today",
        item_Class: "fa-light fa-calendar-days",
    },
    {
        name: "Upcoming",
        item_Class: "fa-regular fa-angle-up",
    },
    {
        name: "Complete",
        item_Class: "fa-regular fa-flag",
    },
    {
        name: "Setting",
        item_Class: "fa-regular fa-gears",
    },
]

let left_nabar = document.querySelector(".left-navbar-list");

// 循环生成所有导航项（可选，按需使用）
left_navbarList.forEach(item => {
    const div = document.createElement('div')
    div.className = "border-white border-solid rounded-3xl pl-3.5 p-1.5 bg-[#3D404A]"
    
    const i_tag = document.createElement('i');
    i_tag.className = item.item_Class;
    div.appendChild(i_tag);
    
    // 用文本节点添加名称，避免覆盖图标
    const textNode = document.createTextNode(` ${item.name}`); // 加空格分隔图标与文字
    div.appendChild(textNode);
    
    left_nabar.append(div);
});

// 若仅需生成第一个项，使用以下代码：
// const div = document.createElement('div')
// div.className = "border-white border-solid rounded-3xl pl-3.5 p-1.5 bg-[#3D404A]"
// const i_tag = document.createElement('i');
// i_tag.className = left_navbarList[0].item_Class;
// div.appendChild(i_tag);
// const textNode = document.createTextNode(` ${left_navbarList[0].name}`);
// div.appendChild(textNode);
// left_nabar.append(div);

HTML代码

<div class="left-navbar-list"></div>

补充说明 #

• 用document.createTextNode()或div.insertAdjacentText('beforeend', ${item.name})添加文本，均可避免覆盖已有的子元素。
• 确保Font Awesome脚本标签正确引入（你已插入头部，此部分无需调整），示例引入代码：

  <script src="https://cdn.jsdelivr.net/npm/font-awesome@6.4.0/js/all.min.js"></script>
  

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