如何使用Gatsby中Font Awesome的圖標

我想在我的Gatsby項目中使用Font Awesome Icons。我很想用CDN包含字體。如何使用Gatsby中Font Awesome的圖標

將它包含在腳本標記中不起作用。我想我需要導入它與import ... from '../fontawesome.css'，但我無法得到這個工作，也想爲此使用CDN。還是我需要解析它與一個css庫的蓋茨比？

請給我建議或提示如何做到這一點。

2017-10-19 Jobeso

「就包括它在腳本標記不起作用。「很難幫助我們看不到的代碼。 – Amy

使用react-icons代替 –

最好在一個JS中包含應用程序需要的每個模塊。但是，如果你仍然想使用CDN，只需複製和編輯默認模板：

cp .cache/default-html.js src/html.js

如果要打包字體真棒項目捆綁，你可以選擇：

使用一些反應圖標庫。例如react-fontawesome
包含的CSS文件

對於最後一個選項，則必須將CSS和網頁的字體文件夾，然後包括髮在你的js文件。

要使用字體真棒類，使用className屬性

<i className="fa fa-twitter"></i>

如果你正在尋找得到一個CDN的js代碼，使用Netlify

來源

2017-10-23 12:05:52

哇感謝您的傑出答案 – Jobeso

https://github.com/gorangajic/react-icons是另一個選項，包含Font Awesome，Material Design，Github Octicons，Ionicons和Typicons庫中的圖標。 –

請注意，即使'react-fontawesome'仍然需要您以某種方式鏈接或包含CSS文件。引用他們的NPM頁面：「注意：該組件不包含任何Font Awesome CSS或字體，因此您需要確保以某種方式將它們包含在您的末端，或者將它們添加到您的構建過程或鏈接到CDN版本「。所以這不是一個真正的選擇 - 'react-fontawesome'只處理反應組件的邏輯 – gandreadis

如何使用Gatsby中Font Awesome的圖標

回答

相關問題