我正在使用Angular2和SCSS，作为一个最佳实践，我复制到我的项目中，只有我正在修改的引导文件从node_modules导入。唯一的问题是glyphicon。 经过多次尝试，我发现对我来说最好的解决方案是复制字体文件到我的项目，并直接设置此路径为$ icon-font-path，如图所示:

我修改了较少的变量。更少的文件 我修改了变量

@icon-font-path:          "fonts/";    

最初的是

@icon-font-path:          "../fonts/"; 

这造成了一个问题

我有一个盒子宽度代码\e094用于象形文字箭头向下，事实上我解决了在CSS类中添加象形文字的问题:

<i class="glyphicon  glyphicon-arrow-down"></i>

如果它能帮助某人…

我也有同样的问题，除了在本页的隐藏评论中，我找不到任何关于它的信息。根据Chrome浏览器，我的字体文件加载正常，但图标显示不正常。我把这个作为答案，希望能帮助到其他人。

我从Bootstrap 3的定制工具下载的字体文件有问题。要获得正确的字体，请访问Bootstrap主页并下载完整的.zip文件。从那里提取四个字体文件到你的字体目录，一切都应该工作。

我在Eclipse中使用web片段时遇到了这个问题。字体文件被损坏时，包装在web片段jar。 将字体文件复制到使用片段的项目中就可以解决这个问题。

您必须按以下顺序设置:

<link rel="stylesheet" href="path/bootstrap.min.css">
 <style type="text/css">
      @font-face {
  font-family: 'Glyphicons Halflings';
        src: url('../fonts/glyphicons-halflings-regular.eot');
        src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),       url('../fonts/glyphicons-halflings-regular.woff') format('woff'),        url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),       url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
 </style>