使用jQuery的Fontawesome图标似乎不能在SVG图层中正常工作

Question

我有一段代码可以在浏览器控制台中运行，对所有我的Fontawesome图标都有效。

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

- Chris Hough

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');
  });
});

- Chris Hough