使用jQuery替换Font Awesome图标失败，寻求解决方法

你的代码存在几个问题，修正后即可正常工作，以下是具体方案：

原代码的问题点 #

• 选择器错误：.fa fa-arrows-alt 写法有误，同一个元素的多个类选择器需要用.连接，正确写法是 .fa.fa-arrows-alt
• 图标类名错误：fa-fa-compress 多了一个前缀，正确的Font Awesome类名是 fa fa-compress
• 转义字符多余：不需要对 <> 进行转义，直接写标签即可

修正后的原生JS代码 #

const toolbar1 = document.querySelector("#toolbar1");
const iconToReplace = toolbar1.querySelector(".fa.fa-arrows-alt");
iconToReplace.className = 'fa fa-compress'; // 直接替换类名比修改innerHTML更可靠

更简洁的jQuery实现方案 #

既然已经引入了jQuery，用jQuery语法会更简洁：

$('#toolbar1 .fa.fa-arrows-alt').removeClass('fa-arrows-alt').addClass('fa-compress');

或者直接替换类名：

$('#toolbar1 .fa.fa-arrows-alt').attr('class', 'fa fa-compress');

注意：如果使用的是Font Awesome 5+版本，类名前缀是 fas 或 fab 而非 fa，需要根据实际版本调整前缀。

内容的提问来源于stack exchange，提问作者Mohamed Zahour