使用FontAwesome 5.0 SVG Framework时在图标之间切换

Question

我希望能够在使用新的FontAwesome SVG框架时在Javascript中切换图标.

以前在旧的WebFont方法中,这是通过切换或更改标记上的类来实现的,但是由于这些现在在源代码中呈现为SVG,因此不再有效.

有没有办法做到这一点,而无需在源代码中呈现两个SVG图标并使用其他类/ CSS来切换显示？

Answer 1

Font Awesome 5.0.0刚刚发布,从4.7到5.0的迁移破坏了我的javascript/jquery,当用户点击它时,将"fa-star-o"图标更改为"fa-star".

我设法修复它,所以我想与你分享这两个提示:

HTML中的图标:

<i class="foo fas fa-star"></i>

1)用jQuery更改图标(从"星"到"闹钟",反之亦然):

var icon = $('.foo');
var icon_fa_icon = icon.attr('data-icon');

if (icon_fa_icon === "alarm-clock") {
    icon.attr('data-icon', 'star');
} else {
    icon.attr('data-icon', 'alarm-clock');
}

2)使用jQuery更改图标样式(从'fas'到'far'):

var icon = $('.foo');
var icon_fa_prefix = icon.attr('data-prefix');

if (icon_fa_prefix === 'fas') {
    icon.attr('data-prefix', 'far');

} else {
    icon.attr('data-prefix', 'fas');
}

希望能帮助任何有同样问题的人.

Answer 2

已通过FA 5.0.2验证

我修改的字体,真棒的网站上找到了原始的文档在这里.他们网站上的选择器没有选择正确的元素,所以我们需要修改属性.

HTML

<div class='icon'><i class='far fa-minus-square'></i></div>

div的类别并不重要,因为我们可以改变它.看一下javascript,我们正在使用该元素来查找svg,具体来说,我们正在寻找data-icon属性.一旦我们知道了data属性,我们就可以在每次单击时更改它.

所以在这种情况下,它以负方形开始.如果图标是负方形,则将其更改为正方形.如果它不是正方形,它会将其改为负方形.

JQuery的

  document.addEventListener('DOMContentLoaded', function () {
    $('.icon').on('click', function () {
      if ($(this).find('svg').attr('data-icon') == 'minus-square' ) {
        $(this).find('svg').attr('data-icon', 'plus-square');
      } else {
        $(this).find('svg').attr('data-icon', 'minus-square');
      };
    });
  });

Answer 3

假设您在fontawesome.js表中使用了推荐的方法,我在官方文档中找到了这个:

通过更改班级来更改图标:

<button>Open up <i class="fa fa-angle-right"></i></button>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    $('button').on('click', function () {
      $(this)
        .find('[data-fa-i2svg]')
        .toggleClass('fa-angle-down')
        .toggleClass('fa-angle-right');
    });
  });
</script>

Answer 4

我也有同样的问题,我发现(在向右滚动到最后)FontAwesome网站声明如下:

嵌套<svg>标签而不是替换

在某些情况下,<i>标签的更换不会像您需要的那样工作.

您可以配置Font Awesome以在标记内嵌套.

为此,只需要FontAwesomeConfig对象和设置autoReplaceSvg: 'nest'.

<script>
    FontAwesomeConfig = { autoReplaceSvg: 'nest' }
</script>