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

但我需要一个亲戚：＆＃34; ../ fonts / bootstrap＆＃34; - 所以在文件_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");
}

在网络上，我发现了一个包含＆＃34; bootstrap-sprockets＆＃34;在变量之前，结果是

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

网址本身似乎没问题 - 但这个＆＃34; font-path＆＃34;来自，我该如何摆脱它？

或者是否有其他方法来指定相对路径？我错了什么？

Answer 1

在不使用罗盘的情况下解决此问题的一种简单方法是在包含引导程序之前声明字体路径功能。你的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");
}

Bootstrap - Sass：相对glyphicons图标路径

2 个答案: