Bootstrap-Sass：相对字形图标路径 [英] Bootstrap - Sass: relative glyphicons icon path

问题描述

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

How do I set a relative glyphicons icon path in bootstrap sass version?

默认情况下，css字体中使用的路径是绝对路径。

By default, the path used in the css font-face is an absolute one.

@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

But I need a relative one: "../fonts/bootstrap" - so in file _bootstrap-variables.scss, I set the $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之前有提示变量，结果是

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

URL本身看起来还不错-但此字体路径从何而来从，我如何摆脱它？

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?

推荐答案

一种无需使用罗盘即可解决此问题的简单方法是在包含以下内容之前声明字体路径功能引导程序。 sass应该看起来像这样：

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:

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

有点黑，我我不确定是否还有其他设置无法使用这样的设置（不使用指南针），但到目前为止它似乎对我仍然有效。

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.

这篇关于Bootstrap-Sass：相对字形图标路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！