我无法在我的实时服务器上加载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.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";
但他们都不适合我,但他们在本地服务器上很好.
解决方法
这是资产管道妨碍你的方式……
请按照以下步骤进行修复：
>将字体文件glyphicons-halflings-regular.*复制到文件夹you-app-path / vendor / assets / fonts
>将文件boostrap.css复制到文件夹you-app-path / vendor / assets / stylesheets
>将复制的文件boostrap.css重命名为boostrap.css.erb
>编辑文件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)
>将此行添加到文件you-app-path / app / assets / stylesheets / application.css.scss：
*= require bootstrap
>最后,重启你的rails应用程序,一切都应该工作.
