Meteor + Bootstrap 3 的 Glyphicons 无法正常工作

Question

我一直在尝试在Meteor中使用Bootstrap 3，但是Bootstrap可以正常工作，但是Glyphicons无法正常显示。当带有图标的文件导入时，会显示以下错误：

Resource interpreted as Font but transferred with MIME type     text/html:"http://localhost:3000/client/fonts/glyphicons-halflings-regular.woff". 

- David

Answer 1

您将此文件放错了位置。所有应由Meteor作为单独实体提供的文件都应放置在/public目录中。

 

---

 

当Meteor服务器收到路径时，首先检查/public中是否有匹配的文件。 如果有，则将其提供。 否则，Meteor将自身作为HTML文件加载到客户端，并在客户端路由器中处理路径。

在您的情况下，您正在尝试访问位于/client目录而不是/public目录中的文件，因此发生第二种情况。 结果，浏览器获得带有Meteor代码的HTML文件，而不是所需的字体。

要解决此问题，请将字体移动到像/public/fonts/glyphicons-halflings-regular.woff这样的位置，然后通过/fonts/glyphicons-halflings-regular.woff在Bootstrap的CSS中使用。

- Hubert OG

---

非常感谢！那个起作用了。我还是 Meteor 的新手。 - David

Answer 2

这是我自己的Bootstrap3包结构，对于我来说效果很好：

bootstrap3
|-> dist (bootstrap3 directory containint js/, css/ and fonts/)
|-> bootstrap_override.css (override fonts paths)
|-> package.js (package definition)

bootstrap_override.css

@font-face{
    font-family:'Glyphicons Halflings';
    src:url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.eot');
    src:url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
    url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.woff') format('woff'),
    url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
    url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

package.js

Package.describe({
    summary:"bootstrap 3.0 packaged for Meteor."
});

Package.on_use(function(api){
    api.use(["jquery"],"client");
    //
    api.add_files([
        // bootstrap fonts
        "dist/css/bootstrap.min.css",
        "dist/css/bootstrap-theme.min.css", (optional bootstrap2 lookalike theme)
        // bootstrap javascript
        "dist/js/bootstrap.min.js"
    ],"client");
    api.add_files([
        "dist/fonts/glyphicons-halflings-regular.eot",
        "dist/fonts/glyphicons-halflings-regular.ttf",
        "dist/fonts/glyphicons-halflings-regular.svg",
        "dist/fonts/glyphicons-halflings-regular.woff"
    ],"client",{
        // undocumented hint : do not bundle those files along with with js/html resources
        isAsset:true
    });
    api.add_files([
        // overriding css
        "bootstrap_override.css"
    ],"client");
});

这个包指定字体是特殊资源，不应该与常规js/html一起捆绑在客户端上，引用核心开发人员David Glasser的话说“它需要未经处理并可单独获取”。(参见https://github.com/meteor/meteor/issues/1357)

bootstrap_override.css文件必须覆盖在bootstrap.css中定义的默认相对路径，使用我们的包相关的绝对路径。

您也可以从atmosphere使用bootstrap-3包。(https://atmosphere.meteor.com/package/bootstrap-3)

- saimeunt

---

我正在使用来自大气层的包（其结构与您在此处编写的相同），但我遇到了David提到的相同错误。对我来说，这似乎很正常，因为文件确实不在公共目录中，而是在客户端目录中（在包中）。有什么提示吗？ - seb

Answer 3

使用Storm，我进入了.meteor文件夹> local> build> programs> web.browser> packages> twbs_bootstrap> dist> fonts，找到了glyphicons库，然后将它们复制到\public\fonts中。

- Marcus Tewksbury