Font-Awesome 5 PRO in rails 5 app

Question

為了獲得專業軟件包的好處，無法從gem中添加font-awesome 5。

嘗試了不同的方法來添加提供給項目的文件。 遵循官方指南

包裝內容：

我在其他stackoverflow帖子中看到，將其添加到應用程序的正確方法是

vendor/assets/

但在那之后，put / on-server /的css，js和font或/ web-fonts-with-css / files仍然無法正常工作。

嘗試添加自定義樣式表鏈接，需要並在scss中導入。 無法實現它。

希望我已經清楚了。

Answer 1

使用'Web字體與CSS'方法有一個皺紋，因為字體網址被硬編碼到CSS文件中，但它可以完成。

CSS：

將fontawesome-all.css復制到'vendor / assets / stylesheets'文件夾。

使用更新您的app / assets / stylesheets / application.css文件

 *= require fontawesome-all

字體：

然后將webfonts文件夾復制到公共目錄，以便所有字體都在public / webfonts文件夾中。

重新啟動您的服務器，您現在應該能夠看到您的FA5字體。

帶JS的SVG

如果你想讓它變得更容易（只有一個文件可以跟蹤）那么你可以使用'SVG with JS'方法。

JS：

將fontawesome-all.js復制到'vendor / assets / javascripts'文件夾。

使用更新您的app / assets / stylesheets / application.js文件

 //= require fontawesome-all

重新啟動服務器，你很高興。

Answer 2

還有一種方法可以使用沒有任何js的原始svg，從而避免渲染問題和討厭的黑客導致惱人的閃爍副作用

它以視圖助手的形式出現，名為faw_icon https://github.com/alexwebgr/faw_icon ，它提供了三種將svg加載到應用程序中的方法

1. 使用元數據中的icons.json
2. 使用原始的單個svg文件
3. 使用svg精靈

根據設計，它不捆綁任何符合較小下載大小的圖標，並使開發人員能夠在新圖標集可用時更新圖標集，使用自定義圖標集或PRO集合

Answer 3

如果您使用支持節點模塊的rails。

1. 添加配置

npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && \
  npm config set "//npm.fontawesome.com/:_authToken" YOUR_AUTH_TOKEN

要么

將配置保存在app根文件夾中的.npmrc文件中，如下所示

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=YOUR_AUTH_TOKEN

2. 運行NPM或YARN以安裝軟件包

npm install --save @fortawesome/fontawesome-pro

要么

yarn add @fortawesome/fontawesome-pro

3. 在app / assets / application.js文件中添加包

//= require @fortawesome/fontawesome-pro/js/all.min.js

4. 通過在config / application.rb中添加以下行，在資源路徑中包含Node Modules文件夾

config.assets.paths << Rails.root.join('node_modules')

再次啟動服務器，你可以使用font-awesome PRO 。

有關詳細信息，請訪問以下鏈接：

https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers