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

Azure网站缺少woff MIME配置。您必须将以下条目添加到web.config中

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration> 

下载完整/非定制包从那里的网站和替换您的字体文件与非定制包字体。意志是固定的。

检查它是否为glyphicons-halflings-regular。Woff而不是glyphiconshalflings-regular.woff

读者注意:一定要阅读@user2261073的评论和@Jeff关于定制器中的一个错误的回答。这可能就是你的问题所在。

字体文件没有正确加载。检查文件是否在预期的位置。

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

正如丹尼尔所指出的，这也可能是一种mimetype问题。Chrome的开发工具显示下载的字体在网络选项卡:

例如，确保你没有过度指定字体族

*{font-family: Verdana;}

将从I元素中删除halflings字体。