Question

我不知道如何在简单的流星应用程序中使用Glypicons Pro：

meteor create meteor-intro
cd meteor-intro
meteor（运行应用程序并且运行正常）
meteor add bootstrap-3
将这些文件夹复制到meteor-intro app文件夹中下载\ glyphicons_pro \ glyphicons_pro \ glyphicons \网络\ html_css \ CSS 下载\ glyphicons_pro \ glyphicons_pro \ glyphicons \网络\ html_css \字体下载\ glyphicons_pro \ glyphicons_pro \ glyphicons \网络\ html_css \图像

用以下内容替换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 App运行但不会渲染glyphicons。我怎样才能让它们渲染？

Answer 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 Pro？

1 个答案: