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