如何在简单的 Meteor App 中使用 Glyphicons Pro？答案

【问题标题】：How to use Glyphicons Pro in simple Meteor App?如何在简单的 Meteor App 中使用 Glyphicons Pro？
【发布时间】：2014-08-08 07:09:47
【问题描述】：

我不知道如何在简单的 Meteor App 中使用 Glypicons Pro：

meteor create meteor-intro
cd meteor-intro
meteor（运行应用程序，它工作正常）
meteor add bootstrap-3
将这些文件夹复制到meteor-intro app文件夹中下载\glyphicons_pro\glyphicons_pro\glyphicons\web\html_css\css 下载\glyphicons_pro\glyphicons_pro\glyphicons\web\html_css\fonts 下载\glyphicons_pro\glyphicons_pro\glyphicons\web\html_css\images

用以下内容替换meteor-intro.html的内容：


<head>
  <title>meteor-intro</title>
  <link rel="stylesheet" href="css/style.css?v=2">
  <link rel="stylesheet" href="css/glyphicons.css">
</head>

<body>
  <h2>Fonts</h2>
  <div class="list list-fonts c">
    <a href="" class="glyphicons glass"><strong>glass</strong><span>UTF E001</span></a>
        <a href="" class="glyphicons server_new"><strong>server_new</strong><span>UTF E470</span></a>
  </div>
</body>

Meteor 应用程序运行但字形图标未呈现。我怎样才能让它们渲染？？

【问题讨论】：

对不起...我也不知道如何包含上面的 HTML 代码 sn-p 而不将其呈现为 HTML :(
@Neil 谢谢！现在我明白了！
@gdbMeteor 没问题。在这里找到meta.stackexchange.com/questions/22186/…

标签： meteor twitter-bootstrap-3 glyphicons

【解决方案1】：

您应该将字体和图像放在 Meteor /public 文件夹中，然后将 glyphicons .css 文件的 @font-face 属性中的 url 的相对路径更改为指向它们的位置。

因此，如果您的主 Meteor 应用文件夹中的新相对文件路径变为 public/glyphicons_pro/glyphicons/web/html_css/fonts，请更改 @font-face 属性以对应于公用文件夹中的位置：

@font-face {
  font-family: 'Glyphicons Regular';
  src:
    url('/glyphicons_pro/glyphicons/web/html_css/fonts/glyphicons-regular.eot');
  src:
    url('/glyphicons_pro/glyphicons/web/html_css/fonts/glyphicons-regular.eot?#iefix') format('embedded-opentype'),
    url('/glyphicons_pro/glyphicons/web/html_css/fonts/glyphicons-regular.woff') format('woff'),
    url('/glyphicons_pro/glyphicons/web/html_css/fonts/glyphicons-regular.ttf') format('truetype'),
    url('/glyphicons_pro/glyphicons/web/html_css/fonts/glyphicons-regular.svg#glyphiconsregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

您应该将 .css 文件放在 Meteor 目录的一部分中，该文件仅在客户端提供。

*并且还从您的 - 文件中删除链接，一旦它们被放置在适当的目录中，它们就会在您的应用程序中自动加载。

【讨论】：

您的答案有效！ *我为 glyphicons.css（修复了路径）和 style.css 添加了一个 /client/stylesheets 文件夹，并将其他 glyphicon 内容留在了 /public 中。这使我可以删除meteor-intro.html 中的链接并删除/public 中的css 文件夹。干杯！