Bootstrap - Sass: relative glyphicons icon path

独自空忆成欢 提交于 2019-12-06 06:36:40

问题


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

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

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/"

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?


回答1:


A simple way to fix this without using compass is to declare a font-path function before including bootstrap. Your sass should like 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.




回答2:


I used the Compass without Rails installation. Uncommenting the relative_assets line in config.rb solved the issue for me.

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

Without changing $icon-font-path you should end up with something like this in your generated stylesheet:

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



回答3:


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:

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_assets enabled and bootstrap-sass as the only dependency.

Then, in my 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!



来源:https://stackoverflow.com/questions/28148322/bootstrap-sass-relative-glyphicons-icon-path

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!