Search code examples
meteortwitter-bootstrap-3glyphicons

How to use Glyphicons Pro in simple Meteor App?

I don't know how to use Glypicons Pro in simple Meteor App:

  1. meteor create meteor-intro
  2. cd meteor-intro
  3. meteor (to run the app and it works fine)
  4. meteor add bootstrap-3

  5. copy these folders of files into meteor-intro app folder Downloads\glyphicons_pro\glyphicons_pro\glyphicons\web\html_css\css Downloads\glyphicons_pro\glyphicons_pro\glyphicons\web\html_css\fonts Downloads\glyphicons_pro\glyphicons_pro\glyphicons\web\html_css\images

  6. replace content of meteor-intro.html with the following:

    
<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 runs but glyphicons are not rendered. How can I get them to render??

Solution

  • You should place the fonts and images in your Meteor /public folder, and then change the relative path of the url in the @font-face property of the glyphicons .css file to point to their location.

    So if your new relative file path from your main Meteor app folder becomes public/glyphicons_pro/glyphicons/web/html_css/fonts, change the @font-face property to correspond to the location in the public folder:

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

    You should place the .css file in a part of your Meteor directory where it is only served on the client side.

    *And also remove the links from your - the files are loaded automatically within your app once they are placed in the appropriate directories.