Html 展开时如何修改菜单图标？

我想用很棒的字体更改主菜单图标：

折叠时

展开时

自从更新到制作Awesome5后，它就不再工作了

#block-menuprincipal li.dropdown > a i:before {
    content: '\f055';
}

#block-menuprincipal li.dropdown > a[aria-expanded=true] i:before {
    content: '\f056';
}

---

是的。字体改变了一些事情。然而，你有两个选择。处理这些情况的新的、推荐的方法是自己构建用于更改图标的类。在他们文档的这一部分中，您可以看到他们构建了一个图标，而没有在类的前面加上fa。相反，他们只是使用class.login并添加了所需的样式

或者，您仍然可以使用他们的，尽管他们至少不推荐这样做。请注意，在靠近蓝色标题部分底部的页面上有四个选项卡。您当前正在将SVG与JS一起使用。您只需要切换到将Web字体与CSS结合使用的步骤

最后，我不确定这是否有效，但他们也提供了一个垫片。如果您有很多遗留代码，可能允许您仍然使用伪类内容值，也可能不使用。我还没有测试过这个，但至少知道它存在是件好事

<a href="/boutique" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><svg class="svg-inline--fa fa-minus-circle fa-w-16 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="minus-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"></path></svg><!-- <i class="fas fa-minus-circle fa-lg" aria-hidden="true"></i> --> Boutiques</a>