[英]Rails: Font awesome icons not showing using font-awesome-rails gem
I can't seem to find an answer that works for me.我似乎找不到适合我的答案。
The icon shows up as a box: 图标显示为一个框:
I'm using:我正在使用:
font-awesome-rails (4.6.2.0)
rails (4.2.3)
I imported font-awesome-rails in my application.scss file using:我使用以下命令在 application.scss 文件中导入了 font-awesome-rails:
@import "font-awesome";
and here is what I wrote for the view:这是我为视图编写的内容:
<i class="quote-left fa fa-quote-left"></i>
I've tried including it before and after bootstrap.我试过在引导之前和之后包括它。
I also tried manually adding the font folder to the pipeline in application.rb我还尝试将字体文件夹手动添加到 application.rb 中的管道
config.assets.paths << Rails.root.join("app", "assets", "fonts")
Clearing the tmp folder didn't seem to do anything either.清除 tmp 文件夹似乎也没有做任何事情。
I spent way too much time on this, please help :(我花了太多时间在这上面,请帮忙:(
I had this issue when working with Rails 6 and Bootstrap 4 in Ubuntu 20.04 .我在Ubuntu 20.04 中使用Rails 6和Bootstrap 4时遇到了这个问题。
I had set up Fontawesome this way :我以这种方式设置了 Fontawesome :
First I added Font Awesome to my package.json
file:首先,我将 Font Awesome 添加到我的
package.json
文件中:
yarn add @fortawesome/fontawesome-free
Next, I imported it into my app/javascript/packs/application.js
file:接下来,我将它导入到我的
app/javascript/packs/application.js
文件中:
require("@fortawesome/fontawesome-free")
Next, I imported it into my app/assets/stylesheets/application.scss
file:接下来,我将它导入到我的
app/assets/stylesheets/application.scss
文件中:
$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/v4-shims';
I also added the Font Awesome 5 Rails gem to my Gemfile:我还在我的 Gemfile 中添加了Font Awesome 5 Rails gem:
gem 'font_awesome5_rails'
and installed it in my project:并将其安装在我的项目中:
bundle install
And finally I modified where my fontawesome icons were called from this format:最后,我修改了从这种格式调用我的 fontawesome 图标的位置:
<i class="fas fa-camera-retro"></i>
to this format到这种格式
fa_icon('camera-retro')
But the issue was that the icons were displaying fine in development but not in production.但问题是图标在开发中显示良好,但在生产中显示不正常。
Here's how I fixed it :这是我修复它的方法:
The issue was that I needed to import the FontAwesome 5 fonts into the app/assets/stylesheets/application.scss
file.问题是我需要将FontAwesome 5字体导入
app/assets/stylesheets/application.scss
文件。 So I imported this to it:所以我把这个导入到它:
@import 'font_awesome5_webfont';
So my fontawesome import to the app/assets/stylesheets/application.scss
file looked like this finally:所以我对
app/assets/stylesheets/application.scss
文件的 fontawesome 导入最终看起来像这样:
@import 'font_awesome5_webfont';
$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/v4-shims';
This time the icons displayed properly in development as well as production.这次图标在开发和生产中都能正确显示。
Note : Please ensure to re-compile your assets after making these changes and restart your server.注意:请确保在进行这些更改后重新编译您的资产并重新启动您的服务器。
That's all.仅此而已。
I hope this helps我希望这会有所帮助
I moved my import of font-awesome below my font import and it solved it.我将我的 font-awesome 导入移到了我的字体导入下方并解决了它。
from this:从此:
@import "font-awesome";
@import url("https://fonts.googleapis.com/css?family=Playfair+Display:700,900");
to this:对此:
@import url("https://fonts.googleapis.com/css?family=Playfair+Display:700,900");
@import "font-awesome";
Try restarting your webserver, after adding @import 'font-awesome.css' to your application.scss .在将@import 'font-awesome.css' 添加到application.scss后,尝试重新启动您的网络服务器。
Also read these, if you haven't yet,还请阅读这些,如果你还没有,
https://github.com/bokmann/font-awesome-rails/issues/130#issuecomment-95308175 https://github.com/bokmann/font-awesome-rails/issues/130#issuecomment-95308175
https://github.com/bokmann/font-awesome-rails/issues?q=is%3Aissue+is%3Aclosed https://github.com/bokmann/font-awesome-rails/issues?q=is%3Aissue+is%3Aclosed
I solved this issue by explicitly declaring a font-family: FontAwesome;
我通过明确声明一个
font-family: FontAwesome;
解决了这个问题font-family: FontAwesome;
rule in my stylesheet because a global *
style was overwriting the font-family
attribute for the .fa
class.我的样式表中的规则,因为全局
*
样式覆盖了.fa
类的font-family
属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.