當使用FontAwesome 5.0 SVG框架時在圖標之間切換

Question

我期望能夠在使用新的FontAwesome SVG框架的Javascript中切換圖標。

以前在舊的WebFont方法中，這是通過切換或更改標籤上的類來實現的，但是由於SVG在源代碼中的顯示不再有效，所以這些都已經呈現。

有沒有辦法做到這一點，而不需要在源代碼中呈現兩個SVG圖標並使用其他類/ CSS切換顯示？

Answer 1

字體真棒5.0.0剛剛被釋放，從4.7到5.0的遷移擊毀了我的JavaScript/jQuery的改變「當用戶點擊它時，「fa-star-o」圖標變爲「fa-star」。

我設法解決它，所以我想與你們這兩個小技巧分享：

在HTML中的圖標：用jQuery

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

1）更改圖標（從「明星」到「鬧鐘」，反之亦然）：

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」 到 「遠」）：

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

沒有找到關於此的任何文檔。 因爲它不是offically尚未公佈，你可以使用此解決方案（jQuery的）：

$('svg.fa-toggle-off').replaceWith('<i class="fas fa-toggle-on"></i>'); 

Answer 3

驗證與FA 5.0.0使用加載圖標

HTML

<div id='icon'><i class='far fa-eye-slash'></i></div> 

這是HTML代碼的樣子，一旦呈現頁面，點擊之前推薦的JS方法：

<div id="icon"><svg class="svg-inline--fa fa-eye-slash fa-w-18" aria-hidden="true" data-fa-processed="" data-prefix="far" data-icon="eye-slash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M272.702 359.139c-80.483-9.011-136.212-86.886-116.93-167.042l116.93 167.042zM288 392c-102.556 0-192.092-54.701-240-136 21.755-36.917 52.1-68.342 88.344-91.658l-27.541-39.343C67.001 152.234 31.921 188.741 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.004 376.006 168.14 440 288 440a332.89 332.89 0 0 0 39.648-2.367l-32.021-45.744A284.16 284.16 0 0 1 288 392zm281.354-111.631c-33.232 56.394-83.421 101.742-143.554 129.492l48.116 68.74c3.801 5.429 2.48 12.912-2.949 16.712L450.23 509.83c-5.429 3.801-12.912 2.48-16.712-2.949L102.084 33.399c-3.801-5.429-2.48-12.912 2.949-16.712L125.77 2.17c5.429-3.801 12.912-2.48 16.712 2.949l55.526 79.325C226.612 76.343 256.808 72 288 72c119.86 0 224.996 63.994 281.354 159.631a48.002 48.002 0 0 1 0 48.738zM528 256c-44.157-74.933-123.677-127.27-216.162-135.007C302.042 131.078 296 144.83 296 160c0 30.928 25.072 56 56 56s56-25.072 56-56l-.001-.042c30.632 57.277 16.739 130.26-36.928 171.719l26.695 38.135C452.626 346.551 498.308 306.386 528 256z"></path></svg><!-- <i class="far fa-eye-slash"></i> --></div> 

JQUERY（上點擊使用）

$("#icon").click(function() { 
    // Change the child svg attribute data-icon to the new icon (remove fa-) 
    $("#icon > svg").attr('data-icon','eye'); 
}); 

這會將圖標從斜眼更改爲眼。

編輯：二○一七年十二月二十日
由於字體真棒5.0.1，使用JavaScript版本，您現在可以添加/像以前刪除的類時，它只是需要在SVG的元素，而不是原始元素（假設i）。

更新代碼：

$("#icon").click(function() { 
    // Change the child svg attribute data-icon to the new icon (remove fa-) 
    $("#icon > svg").addClass('fa-eye').removeClass('fa-eye-slash'); 
}); 

還應注意，任何施加IDS或類到字體真棒元件將被帶到轉移到SVG。因此，如果你有<i id='eyecon' class='eyecon fa fa-eye'>那麼它會渲染<svg id='eyecon' class='eyecon'>。

Answer 4

與FA 5.0.2

驗證我修改的字體 - 真棒網站here發現原來的文檔。他們網站上的選擇器沒有選擇正確的元素，所以我們需要修改屬性。

HTML

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

類股利並不真的那麼重要了，因爲我們可以改變它的。看看javascript，我們使用元素來查找svg，具體來說，我們正在尋找data-icon屬性。一旦我們知道了數據屬性，我們就可以在每次點擊時改變它。

所以在這種情況下，它開始與減號。如果圖標是減號，它會將其更改爲正方形。如果不是正方形，則會將其更改爲負方。

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