css - Rails Awesome 字体

Question

我正在尝试让 Font Awesome 与我的 Rails 应用程序一起使用，如下所示: http://fontawesome.io/get-started/

我不想使用 CDN，因为我还想使用其他没有 CDN 的字体，所以我想了解如何让非 CDN 字体工作: https://github.com/540co/govicons

我已经下载并解压了 Font Awesome 到:

/app/assets/fonts/font-awesome-4.7.0

我不知道我使用的是 CSS 还是 SASS？在我的样式表文件夹中，我有带有 css 和 sass 扩展名的文件。我有一个 application.css 文件和一个空的 application.scss 文件。我的所有其他文件都有 scss 扩展名。

如果我按照 scss 说明进行操作，那么第 2 步是:

Open your project's font-awesome/less/variables.less or font-awesome/scss/_variables.scss and edit the @fa-font-path or $fa-font-path variable to point to your font directory.

此文件位于:

/app/assets/fonts/font-awesome-4.7.0/scss/_variables.scss

这个变量当前读取:

$fa-font-path: "../fonts" !default;

这应该更新到什么？

Answer 1

我会将这些移动到 vendor/assets 而不是 app/assets 因为 ( source )

vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks

mkdir -p vendor/assets
mv font-awesome-4.7.0/ vendor/assets/
ls vendor/assets/font-awesome-4.7.0/
# css       fonts       less        scss

然后，如果您正在使用 application.css，您可以:

1. 编辑 app/assets/stylesheets/application.css
2. 在需求列表中添加:*= require css/font-awesome
3. 重启服务器并加载页面

一切正常

如果你想在 SCSS 中使用它:

1. 添加 app/assets/stylesheets/font_awesome.scss 内容:

   $fa-font-path: "fonts";
   @import "scss/font-awesome";
   

2. 添加@import "font_awesome";到application.scss

这样做的目的是现在您没有对 vendor/assets 中的文件进行任何自定义更改。这些正是您从站点下载的内容，可以随时更新，而不必担心您是否会记得 $fa-font-path 已更改为自定义路径，因为已完成在你的文件中，而不是他们的。

注意:通常您会希望为 Assets 中的路径使用其中一个助手(如 asset-path)，但它似乎不喜欢与文件夹一起用作稍后给出的文件的占位符。因此，如果不想搜索 font-awesome 并将 $fa-font-path 替换为 asset-path，我们可以这样做，它将从当前文件夹中查找 (在地址栏中，它类似于 #{host}/assets/application-#{cache-buster}.css 所以当前文件夹是 /assets 并且它将寻找我们想要的 /assets/fonts(阅读:通过这个例子，什么对我有用)。

Govicons，看起来你会按照上面完全相同的步骤进行操作，应该会很好。