使用FontAwesome 5.0SVGFramework时图标之间的切换

Question

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

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

有没有一种不需要在源代码中同时呈现SVG图标和使用额外的类/CSS切换显示的方法？

Answer 1

字体Awese5.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验证

我修改了字体-Awesome的网站这里上的原始文档。他们网站上的选择器没有选择合适的元素，所以我们需要修改属性。

​

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

​

div的类并不重要，因为我们可以改变它。查看javascript，我们使用元素查找svg，特别是查找数据图标属性。一旦我们知道数据属性，我们就可以在每次点击数据属性时更改它。

所以在这个例子中，它从负平方开始。如果图标是负方形，它会将其更改为正方形。如果它不是正方形，它会把它改为负数。

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>