Question

我想用令人敬畏的字体更改主菜单图标：

https://fontawesome.com/icons/plus-circle?style=solid。
https://fontawesome.com/icons/minus-circle?style=solid。

由于更新令人敬畏5，它不再起作用了。

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

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

enter image description here

<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>

Answer 1

是的。 Font Awesome改变了一些东西。但是，您有几个选择。处理这些情况的新的推荐方法是自己构建用于更改图标的类。 See here。在他们的文档的这一部分中，您可以看到他们构建了一个图标，而没有在课程前面添加fa。相反，他们只使用了课程.login并添加了所需的样式那个。

或者，您仍然可以使用他们的font-family based implementation，但不推荐（至少由他们推荐）。请注意，在蓝色标题部分底部附近的该页面上有四个标签。您目前正在使用＆＃34; SVG和JS＆＃34;。您只需要切换到使用＆＃34; Web字体与CSS＆＃34;。

的步骤

最后，我不确定这是否有效，但它们也提供了垫片。如果您有许多遗留代码，using the shim可能允许您仍然使用伪类content值，或者它可能不会。我还没有对此进行测试，但至少知道这是在那里很好。

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

1 个答案: