Bootstrap - Sass：相对字形图标路径

Question

如何在 bootstrap sass 版本中设置相对 glyphicons 图标路径？

默认情况下，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");
}

但我需要一个相对的：“../fonts/bootstrap” - 所以在文件 _bootstrap-variables.scss 中，我设置了 $icon-font-path

$icon-font-path: "../fonts/bootstrap/"

给出以下内容

@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");
}

在网上我找到了在变量之前包含“bootstrap-sprockets”的提示，结果是

@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");
}

网址本身似乎没问题 - 但是这个“字体路径”来自哪里，我该如何摆脱它？

或者还有其他方法可以指定相对路径吗？我哪里错了？

Answer 1

在不使用 compass 的情况下解决此问题的一种简单方法是在包含引导程序之前声明一个字体路径函数。你的 sass 应该如下所示：

app.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

有点小窍门，我不确定在这样的设置（不使用指南针）下是否还有其他方法无法使用，但到目前为止它似乎对我有用。

Answer 2

我使用了 Compass without Rails 安装。取消注释 config.rb 中的 relative_assets 行为我解决了这个问题。

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

如果不更改$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");
}

Answer 3

对我来说，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

所以，relative_assets 启用，bootstrap-sass 作为唯一依赖项。

然后，在我的 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;
}

希望对大家有所帮助！