[英]Bootstrap 3 Glyphicons not showing on rails production server
我无法在我的实时服务器上加载Bootstrap 3 Glyphicons字体,这些字体在我的本地服务器上运行完美但在实时服务器上运行不正常。
我已经尝试过各种各样的东西,从SO到一切,但它仍然不适合我。
这是我在做的事情:
applicatin.css.scss
@import "bootstrap-sprockets";
@import 'home';
@import "bootstrap";
@font-face {
font-family: 'Glyphicons Halflings';
src: url("/assets/bootstrap/glyphicons-halflings-regular.eot");
src: url("/assets/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),
url("/assets/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"),
url("/assets/bootstrap/glyphicons-halflings-regular.woff") format("woff"),
url("/assets/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"),
url("/assets/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}
到目前为止我尝试了什么:
@import "bootstrap-sprockets";
@import 'home';
@import "bootstrap";
@font-face {
font-family: 'Glyphicons Halflings';
src: url("/assets/bootstrap/glyphicons-halflings-regular.eot");
src: url("/assets/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),
url("/assets/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"),
url("/assets/bootstrap/glyphicons-halflings-regular.woff") format("woff"),
url("/assets/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"),
url("/assets/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}
和
@import "bootstrap-sprockets";
@import 'home';
@import "bootstrap";
@import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
和
@import "bootstrap-sprockets";
@import 'home';
@import "bootstrap";
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
和
@import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
@import "bootstrap-sprockets";
@import 'home';
@import "bootstrap";
和
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
@import "bootstrap-sprockets";
@import 'home';
@import "bootstrap";
但他们都不适合我,但他们在本地服务器上很好。
这是资产管道阻碍你的方式......
请按照以下步骤进行修复:
编辑文件boostrap.css.erb调整@ font-face变量,如下所示:
@font-face { font-family: 'Glyphicons Halflings'; src: url('<%= asset_path('glyphicons-halflings-regular.eot')%>'); src: url('<%= asset_path('glyphicons-halflings-regular.eot')%>?#iefix') format('embedded-opentype'), url('<%= asset_path('glyphicons-halflings-regular.woff2')%>') format('woff2'), url('<%= asset_path('glyphicons-halflings-regular.woff')%>') format('woff'), url('<%= asset_path('glyphicons-halflings-regular.ttf')%>') format('truetype'), url('<%= asset_path('glyphicons-halflings-regular.svg')%>#glyphicons_halflingsregular') format('svg'); }
添加/调整文件you-app-path / config / initializers / assets.rb中的以下行:
Rails.application.config.assets.precompile += %w(*.svg *.eot *.woff *.woff2 *.ttf)
*= require bootstrap
您可以将所有字体放在文件夹#{Rails.root}/public/fonts
文件夹中,并根据以下内容更改代码。
@font-face {
font-family: 'Glyphicons Halflings';
src: url('/fonts/glyphicons-halflings-regular.eot');
src: url('/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
做这些改变
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
如果再次没有加载任何其他Glyphicons然后更改其路径../fonts/
它将得到解决
我有与我的CDN的CORS问题引起的相同症状。 一旦我最终打开浏览器的JavaScript控制台,这一点很明显。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.