带有jQuery的fontawesome图标似乎不适用于SVG图层

Question

我有以下代码可以在浏览器控制台中运行，这些代码似乎可以像预期的那样与我的所有Font真棒图标一起工作：

jQuery(window).on('load', function () {
$('.icon-wrapper').click(function() {
$('.icon-wrapper').each(function(){
$(this).find('a').removeClass('storyline-header-nav-active-color');
});
$(this).find('a').addClass('storyline-header-nav-active-color');
});
});

然而，当我在应用程序中运行它时，它适用于以下图标：

div[class="icon-wrapper fa-3x"]
= link_to(@storyline_calendars_path, data: { "turbo-frame": "storyline-calendar-todos-org-detail-contents" }) do
i[class="far fa-calendar-alt"]

但它不适用于这些图标：

div[class="icon-wrapper fa-3x"]
= link_to(@storyline_communications_contents_types_path_email, data: { "turbo-frame": "storyline-communications-contents" }) do
span[class="fa-layers fa-fw"]
i[class="fas fa-envelope-square"]
span[class="fa-layers-counter fa-layers-top-right"]
= @email

我唯一的猜测是其中一个使用svg层，而另一个没有。关于这件事，我已经挖遍了所有的网，但我一无所获。我下一步可以尝试什么？

更新

当我不使用层进行计数时，它可以完美地工作。

div[class="icon-wrapper fa-3x"]
= link_to(@storyline_communications_contents_types_path_email, data: { "turbo-frame": "storyline-communications-contents" }) do
i[class="fas fa-envelope-square"]

Answer 1

我必须与其他包装器分开绑定到层，如图所示。。。

jQuery(window).on('load', function () {
$('.icon-wrapper').click(function() {
$('.icon-wrapper').each(function(){
$(this).removeClass('storyline-header-nav-active-color');
});
$(this).addClass('storyline-header-nav-active-color');
});
$('.fa-layers ').click(function() {
$('.fa-layers ').each(function(){
$(this).removeClass('storyline-header-nav-active-color');
});
$(this).addClass('storyline-header-nav-active-color');
});
});