在使用FontAwesome 5.0 SVG框架时在图标之间切换 [英] Switch between icons when using FontAwesome 5.0 SVG Framework

问题描述

以前在旧的WebFont方法中，这是通过以下方法实现的：通过使用新的FontAwesome SVG框架，我可以在Javascript中切换图标。切换或更改标签上的类，但是因为这些现在呈现为SVG在源代码中不再有效。

有没有办法做到这一点，而不需要在源代码中渲染两个SVG图标并使用额外的类/ CSS切换显示？ Font Awesome 5.0.0 has just已被释放，并且从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'）; 
 
 
 
 
 $ b 
  2）用jQuery改变图标风格（从'fas'到'远'）： 
  var icon = $（'。foo'）; 
 var icon_fa_prefix = icon.attr（'data-prefix'）; 
 
 if（icon_fa_prefix ==='fas'）{
 icon.attr（'data-prefix'，'far'）; 
 $ b $}其他{
 icon.attr（'data-prefix'，'fas'）; 
} 
  
希望可以帮助任何有同样问题的人。
 
I'm looking to be able to switch between icons in Javascript while using the new FontAwesome SVG framework.

Previously in the old WebFont method, this was achieved by toggling or changing the class on the  tag, however as these are now rendered as SVG's in the source code this no longer works.

Is there a way to do this without needing to render both SVG icons in source code and using additional classes/CSS to toggle display?
解决方案
Font Awesome 5.0.0 has just been released and the migration from 4.7 to 5.0 wrecked up my javascript/jquery to change a "fa-star-o" icon to "fa-star" when the user clicks on it.

I managed to fix it so I wanted to share with you these two tips:

The icon in HTML:
<i class="foo fas fa-star"></i>
1) Change icon with jQuery (from "star" to "alarm-clock" and vice versa):
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) Change icon-style with jQuery (from 'fas' to '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');
}
Hope that helps anyone with the same issue.

                        
这篇关于在使用FontAwesome 5.0 SVG框架时在图标之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！