twitter-bootstrap Bootstrap - Sass：相对字形图标路径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28148322/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - Sass: relative glyphicons icon path
提问by Joschi
How do I set a relative glyphicons icon path in bootstrap sass version?
如何在 bootstrap sass 版本中设置相对字形图标路径？
By default, the path used in the css font-face is an absolute one.
默认情况下，css font-face 中使用的路径是绝对路径。
@font-face {
font-family: 'Glyphicons Halflings';
src: url(/fonts/bootstrap/glyphicons-halflings-regular.eot?1422262129);
src: url(/fonts/bootstrap/glyphicons-halflings-regular.eot?&1422262129#iefix) format("embedded-opentype"), url(/fonts/bootstrap/glyphicons-halflings-regular.woff2?1422262129) format("woff2"), url(/fonts/bootstrap/glyphicons-halflings-regular.woff?1422262129) format("woff"), url(/fonts/bootstrap/glyphicons-halflings-regular.ttf?1422262129) format("truetype"), url(/fonts/bootstrap/glyphicons-halflings-regular.svg?1422262129#glyphicons_halflingsregular) format("svg");
}
But I need a relative one: "../fonts/bootstrap" - so in file _bootstrap-variables.scss, I set the $icon-font-path
但我需要一个相对的：“../fonts/bootstrap” - 所以在文件 _bootstrap-variables.scss 中，我设置了 $icon-font-path
$icon-font-path: "../fonts/bootstrap/"
which gives the following
这给出了以下内容
@font-face {
font-family: 'Glyphicons Halflings';
src: url(/fonts/../fonts/bootstrap/glyphicons-halflings-regular.eot?1422262129);
src: url(/fonts/../fonts/bootstrap/glyphicons-halflings-regular.eot?&1422262129#iefix) format("embedded-opentype"), url(/fonts/../fonts/bootstrap/glyphicons-halflings-regular.woff2?1422262129) format("woff2"), url(/fonts/../fonts/bootstrap/glyphicons-halflings-regular.woff?1422262129) format("woff"), url(/fonts/../fonts/bootstrap/glyphicons-halflings-regular.ttf?1422262129) format("truetype"), url(/fonts/../fonts/bootstrap/glyphicons-halflings-regular.svg?1422262129#glyphicons_halflingsregular) format("svg");
}
In the web I found the tip to inlcude "bootstrap-sprockets" before the variables, the result is
在网上我找到了在变量之前包含“引导链轮”的提示，结果是
@font-face {
font-family: 'Glyphicons Halflings';
src: url(font-path("../fonts/bootstrap/glyphicons-halflings-regular.eot"));
src: url(font-path("../fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix")) format("embedded-opentype"), url(font-path("../fonts/bootstrap/glyphicons-halflings-regular.woff2")) format("woff2"), url(font-path("../fonts/bootstrap/glyphicons-halflings-regular.woff")) format("woff"), url(font-path("../fonts/bootstrap/glyphicons-halflings-regular.ttf")) format("truetype"), url(font-path("../fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular")) format("svg");
}
The url itself seems ok - but where does this "font-path" come from, how do I get rid of it?
网址本身似乎没问题 - 但是这个“字体路径”来自哪里，我该如何摆脱它？
Or is there another way to specify a relative path? What am I getting wrong?
还是有另一种方法来指定相对路径？我怎么了？
回答by Nick Whiu
A simple way to fix this without using compass is to declare a font-path function before including bootstrap. Your sass should look like the following:
在不使用指南针的情况下解决此问题的一种简单方法是在包含引导程序之前声明一个字体路径函数。您的 sass 应如下所示：
app.scss
应用程序.scss
// your bootstrap default overrides here
$icon-font-path: '../fonts/bootstrap/';
@function font-path($path) {
@return $path;
}
@import 'bootstrap-sprockets';
@import 'bootstrap';
// your application styles here
Bit of a hack, and i'm not sure if anything else won't work with a setup like this (not using compass) but it appears to be working for me so far.
有点黑客，我不确定其他任何东西是否不适用于这样的设置（不使用指南针），但到目前为止它似乎对我有用。
回答by Mikael E. Wikner
I used the Compass without Railsinstallation. Uncommenting the relative_assetsline in config.rbsolved the issue for me.
我使用了没有安装Rails的Compass。在取消对 relative_assets符合config.rb解决这个问题对我来说。
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
Without changing $icon-font-pathyou should end up with something like this in your generated stylesheet:
不改变$icon-font-path你应该在你生成的样式表中得到这样的东西：
@font-face {
font-family: 'Glyphicons Halflings';
src: url(../fonts/bootstrap/glyphicons-halflings-regular.eot?1430235042);
src: url(../fonts/bootstrap/glyphicons-halflings-regular.eot?&1430235042#iefix) format("embedded-opentype"), url(../fonts/bootstrap/glyphicons-halflings-regular.woff2?1430235042) format("woff2"), url(../fonts/bootstrap/glyphicons-halflings-regular.woff?1430235042) format("woff"), url(../fonts/bootstrap/glyphicons-halflings-regular.ttf?1430235042) format("truetype"), url(../fonts/bootstrap/glyphicons-halflings-regular.svg?1430235042#glyphicons_halflingsregular) format("svg");
}
回答by Benjamin Jentsch
For me, the glyphicons icon font does only work when I include bootstrap-compass. I use Compass + Bootstrap in my projects with the following configuration:
对我来说，glyphicons 图标字体仅在我包含bootstrap-compass. 我在我的项目中使用 Compass + Bootstrap，配置如下：
config.rb:
配置文件：
require 'bootstrap-sass'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "./"
css_dir = "."
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
So, relative_assetsenabled and bootstrap-sassas the only dependency.
因此，relative_assets启用并bootstrap-sass作为唯一的依赖项。
Then, in my style.scss:
然后，在我的style.scss 中：
@import "compass/reset";
@import "compass/css3";
@import "custom-bootstrap"; /* where I set stuff like $brand-primary etc */
@import "bootstrap-sprockets";
@import "bootstrap-compass"; /* this is what does the trick in glyphicons for me! */
@import "bootstrap";
.further {
styles: here;
}
Hope it helps anyone!
希望它可以帮助任何人！
