代码之家 › 专栏 › 技术社区 › Qu4k3

rails 5应用程序中的Font Awesome 5 PRO

font-awesome ruby-on-rails-5 sass ruby-on-rails

Qu4k3 · 技术社区 · 8 年前

为了获得pro软件包的好处,不可能从gem中添加font awesome 5。

尝试了不同的方法将提供的文件添加到项目中。下列的 Official guide

我在其他stackoverflow帖子中看到,将其添加到应用程序的正确方法是

vendor/assets/

但在那之后,在服务器上放置/的css、js和font或带有css/文件的/web字体仍然不起作用。

尝试在scss中添加自定义样式表链接、require和import。没有办法实现它。

希望我已经说清楚了。

3 回复 | 直到 8 年前

Adam21e 8 年前

使用“Web字体与CSS”的方法有一个缺点,因为字体url是硬编码到CSS文件中的,但这是可以做到的。

CSS:

复制fontawesome all。css到“供应商/资产/样式表”文件夹。

更新你的应用程序/资产/样式表/应用程序。css文件

 *= require fontawesome-all

字体:

然后将webfonts文件夹复制到public目录,以便所有字体都位于public/webfonts文件夹中。

重新启动服务器,现在应该可以看到FA5字体了。

带JS的SVG

如果您想让它更简单(只跟踪1个文件),那么您可以执行以下操作 'SVG with JS' 方法

JS公司:

复制fontawesome all。js到“vendor/assets/javascripts”文件夹。

更新你的应用程序/资产/样式表/应用程序。js文件

 //= require fontawesome-all

重新启动服务器,就可以开始了。

NAVPREET SINGH 7 年前

如果您使用的是支持节点模块的rails。

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

或

在文件中保存配置 .npmrc 应用程序内根文件夹,如下所示

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

npm install --save @fortawesome/fontawesome-pro

或

yarn add @fortawesome/fontawesome-pro

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

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

再次启动服务器,您就可以开始了 字体真棒PRO .

有关更多详细信息,请访问以下链接:

alex 8 年前

还有一种方法可以在没有任何js的情况下使用原始svg,从而避免渲染问题和导致恼人的闪烁副作用的讨厌的黑客行为

它以名为 faw_icon https://github.com/alexwebgr/faw_icon 它提供了三种将svg加载到应用程序中的方法

通过设计,它不会捆绑任何图标,以满足下载量小的需求,并使开发人员能够在新图标集可用时更新图标集,使用自定义图标集或PRO集合