Bootstrap - Sass: relative glyphicons chemin d'icône

Comment puis-je configurer un parent glyphicons chemin d'icône dans le bootstrap version sass?

Par défaut, le chemin d'accès utilisé dans le css font-face est absolue. 

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

Mais j'ai besoin d'un rapport: "../fonts/bootstrap" - donc, dans le fichier _bootstrap-variables.scss, j'ai mis l'icône $-font-chemin

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

qui donne le

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

Dans le web j'ai trouvé l'astuce pour les suivants "bootstrap-pignons" avant les variables, le résultat est

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

L'url elle-même semble ok - mais d'où vient cette "font-chemin", comment puis-je me débarrasser de lui?

Ou est-il une autre façon de spécifier un chemin relatif? De quoi ai-je tort?

Avez-vous jamais résoudre ce problème?

OriginalL'auteur Joschi | 2015-01-26

  1. 9

    Un simple moyen de résoudre ce problème sans l'aide de la boussole est à déclarer à la police-fonction de chemin avant de bootstrap. Votre sass voudrais comme suit:

    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

    Peu un hack, et je ne suis pas sûr si rien d'autre ne fonctionnera pas avec une telle configuration (pas d'utilisation de la boussole), mais il semble fonctionner pour moi jusqu'à présent.

    OriginalL'auteur Nick Whiu

  2. 2

    J'ai utilisé le Boussole sans Rails de l'installation. Décommentant la relative_assets ligne dans config.rb résolu le problème pour moi.

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

    Sans changer $icon-font-path, vous devriez vous retrouver avec quelque chose comme ceci dans votre générés feuille de style:

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

    OriginalL'auteur Mikael E. Wikner

  3. 0

    Pour moi, les glyphicons icône de la police fonctionne seulement quand j'inclus bootstrap-compass. J'utilise la Boussole + Bootstrap dans mes projets avec la configuration suivante:

    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

    Donc, relative_assets activé et bootstrap-sass que la seule dépendance.

    Alors, dans mon 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;
}

    Espère que cela aide quelqu'un!

    OriginalL'auteur Benjamin Jentsch