Bootstrap — Sass: относительный путь к значку глификона

Как установить относительный путь к значку глификонов в версии bootstrap sass?

По умолчанию путь, используемый в шрифте css, является абсолютным.

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

В Интернете я нашел подсказку, чтобы включить "бутстрап-звездочки" перед переменными, результат

@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-адрес выглядит нормально, но откуда берется этот «путь к шрифту», как мне от него избавиться?

Или есть другой способ указать относительный путь? Что я делаю неправильно?


twitter-bootstrap bootstrap-sass
person Joschi    schedule 26.01.2015    source источник
comment
Вы когда-нибудь решали это?   -  person Jonny    schedule 02.02.2015

Ответы (3)


arrow_upward
9
arrow_downward

Простой способ исправить это без использования компаса — объявить функцию пути к шрифту перед включением начальной загрузки. Ваш 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

Немного взлома, и я не уверен, что что-то еще не будет работать с такой настройкой (без использования компаса), но, похоже, это работает для меня до сих пор.

person Nick Whiu    schedule 13.07.2016

arrow_upward
2
arrow_downward

Я использовал установку Compass без Rails. Раскомментирование строки relative_assets в config.rb решило проблему для меня.

# 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");
}
person Mikael E. Wikner    schedule 28.04.2015

arrow_upward
0
arrow_downward

Для меня шрифт значков глификонов работает только тогда, когда я включаю 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;
}

Надеюсь, это поможет любому!

person Benjamin Jentsch    schedule 10.09.2015