[英]Glyphicons Pro icon not showing correctly in Rails 4.2/Bootstrap
After purchasing Glyphicons online, I integrate the glyphicons regular
with Bootstrap (3.3.6) into Rails 4.2 app. 在线购买Glyphicons后,我将带有Bootstrap(3.3.6)的
glyphicons regular
Glyphicons集成到Rails 4.2应用程序中。 Before that glyphicon halfings
has been integrated by someone else. 在此之前,其他人已经集成了
glyphicon halfings
。
What I did was to copy 5 Glyphicon files ( svg, ttf, eot, woff, woff2
) to glyphicons/web/bootstrap-example/fonts/
to assets/fonts/
. 我所做的是将5个Glyphicon文件(
svg, ttf, eot, woff, woff2
) glyphicons/web/bootstrap-example/fonts/
到glyphicons/web/bootstrap-example/fonts/
到assets/fonts/
。 Also copied is plyphicons/web/bootstrap-example/css/glyphicons.css
to `assets/stylesheets/'. 也将
plyphicons/web/bootstrap-example/css/glyphicons.css
到“ assets / stylesheets /”。
Here are the files under Rails assets: 以下是Rails资产下的文件:
The problem is that the icon in glyphicon regular
not showing. 问题是
glyphicon regular
中的图标未显示。
In application.css.scss
, add @import glyphicons.css
在
application.css.scss
,添加@import glyphicons.css
The problem is that the glyphicon are not showing correctly. 问题是字形图标显示不正确。 Here is the herb codel:
这是草本编码:
<%= link_to '<i class="glyphicons glyphicons-eye-open"></i> Free Trial Now'.html_safe,... %>
It is showing a box with char (can't read) in 4 corners. 它显示了一个在4个角带有char(无法读取)的框。 See image below:
见下图:
What's missing in our process? 我们的过程中缺少什么?
Well, the first thing you should do is to open the browser debug console (Ctrl+shift+i in chrome) and list out the errors that causing this bug. 好吧,您应该做的第一件事是打开浏览器调试控制台(Chrome中的Ctrl + shift + i),并列出导致此错误的错误。
Normally there are always some image references in the third party .css files. 通常,第三方.css文件中总是有一些图像引用。 And when you integrate those files you need to change the image url/path according to the need.
并且,当您集成这些文件时,您需要根据需要更改图像的url /路径。
Try like this: 尝试这样:
this is correct method to use glyphicons into the link 这是在链接中使用glyphicons的正确方法
<td><%= link_to edit_user_path(user) do %>
<i class="glyphicons glyphicons-eye-open" title='Edit'></i>
<% end %>
</td>
You need to do other things to work, 您需要做其他事情才能工作,
Check this tutorial: http://www.erikminkel.com/2013/09/01/twitter-bootstrap-3-in-a-rails-4-application/ 查看本教程: http : //www.erikminkel.com/2013/09/01/twitter-bootstrap-3-in-a-rails-4-application/
Since stylesheet is under /assets
in Rails. 由于样式表位于Rails的
/assets
下。 In glyphicon.css
, fonts
need to be replaced with assets
. 在
glyphicon.css
, fonts
需要替换为assets
。 After this change, glyphicon PRO starts working! 更改之后,glyphicon PRO开始工作!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.