如何用JavaScript将图标转换为Font Awesome？生成的图标无法显示怎么办

存在的3个核心问题 #

• class添加语法错误：classList.add() 方法不需要加CSS选择器的.，且多个类名需要分开作为独立参数传入，你写的starIcon.classList.add('far.fa-star') 会被识别成单个带点的类名，和Font Awesome要求的两个独立类far、fa-star不符。
• DOM节点复用错误：你只创建了1个<i>节点，多次调用append同一个节点时，只会把该节点移动到新的父元素下，不会生成新的节点，最终最多只会有1个星星显示在最后遍历到的.bintang元素里。
• 依赖缺失：你使用的是Font Awesome的图标样式，需要确保页面已经正确引入Font Awesome的样式库，否则图标无法渲染。

修正后的代码 #

window.addEventListener('load', () => {
  let featuredFoods = document.querySelectorAll('.bintang');

  featuredFoods.forEach((el) => {
    // 每个.bintang元素都单独创建5个新的星星节点
    for(let i = 0; i < 5; i++) {
      let starIcon = document.createElement('i');
      // 分开添加两个类名
      starIcon.classList.add('far', 'fa-star');
      el.append(starIcon);
    }
  })
})

内容的提问来源于stack exchange，提问作者MOH SUBHAN