如何在Font Awesome中使用數據屬性？

我想將rel內容轉換爲Font Awesome CSS圖標，因此我不必爲簡單菜單寫20行。如何在Font Awesome中使用數據屬性？

也許有些代碼會讓它更容易理解。

我試着這樣做：

a:before {content: "\(" attr(rel) ")"; font-family: 'FontAwesome';}

基本上我試圖將值轉換rel內，將其轉換爲工作CSS規則。

所以鏈接看起來像這樣：

<a href="http://www.example.com" rel="f291">Example</a>

最終的結果應該是這個樣子：

a:before {content: "\f291")"; font-family: 'FontAwesome';}

來源

2016-01-04 Sagive SEO

雖然問題可能重複爲this post。簡而言之 - 您需要使用HTML實體或unicode字符本身，才能在CSS content屬性中使用它。

但是，在Font Awesome中使用該技術是一個非常有趣的想法，所以我正在寫這個答案，併爲它添加額外的信息。

我建議使用數據屬性data-而不是rel，因爲rel是專爲鏈接類型而設計的。

而在this page有一套完整的Font Awesome unicode表格。您可以複製/粘貼unicode字符或圖標本身。下面的例子：

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"); 
 

 
a::before { 
 
    font-family: 'FontAwesome'; 
 
    content: attr(data-fa-icon); 
 
}

<p><a href="#" data-fa-icon="&#xf206;"> Unicode example</a></p> 
 
<p><a href="#" data-fa-icon=""> Icon example</a></p>

來源

2016-01-05 00:28:31 Stickers

這就是我做的開始;）我試圖使用wordpress菜單和它保留字符，如「＆＃x」 - 但這是一個WP問題。謝謝你的幫助。 –

有趣的是，我做了一個快速搜索，這個[教程]（https://premium.wpmudev.org/blog/add-icons-wordpress-menus/）可能會有所幫助。 – Stickers

有沒有辦法做到這一點在CSS中，因爲沒有變量。你可以使用編譯的CSS（如sass）。另一種方式是js。第三種方法是在服務器端添加HTML樣式。

來源

2016-01-04 17:13:30

我使用更少的不頂嘴......你可以分享一個例子嗎？ –

Js是你最好的辦法！ –

http://stackoverflow.com/questions/9523197/css-values-using-html5-data-attribute ou van fond更多的信息在這裏 –

如何在Font Awesome中使用數據屬性？

回答

相關問題