How to use Glyphicons in my Meteor/Atmosphere package?

Question

I am creating my own meteor package with some HTML templates that use Glyphicons Pro.
For sake of this question, we'll use the "excellent" reference package: jquery-rateit "(http://atmospherejs.com/package/jquery-rateit) and add an HTML template that contains a Glyphicons Pro icon into the jquery-rateit package source code :

<template name="ratingboard">
  <input type="text" id="add-what">
  <div class="rateit" id="add-rating"></div>
      <button id="add-button">
    <span class="glyphicons-icon notes_2"&gt</span>Add rating</button>
  <hr/>
  {{#if ratingsLoaded}}
  <ul>
  {{#each ratings}}
   <li>{{> rating}}</li>
  {{/each}}
  </ul>
  {{else}}
    <img src="http://upload.wikimedia.org/wikipedia/commons/2/2e/24px-spinner-black.gif">
  {{/if}}  
</template>

<template name="rating">
  {{what}} is rated {{rating}}: 
  <div class="rateit" data-rateit-value="{{rating}}"></div>
</template>

Initially I saw the "glyphicons-icon notes_2" rendering successfully in the "Add rating" button in the package HTML. But that success was because the glyphicons files were already added to my meteor application. When I removed all the Glyphicons CSS, fonts, image files and folders from my application, the glyphicons no longer render in the jquery-rateit package template.

How do I include the Glyphicons Pro CSS, fonts, images into my Meteor/Atmosphere Package so that they are rendered wherever the package is installed?

Answer 1

I happen to be the author of the jQuery-rateit package. Pinging me on GitHub would've brought you an answer much faster :)

That said,

1. Glyphicons PRO is not free, so you shouldn't publish an Atmosphere package redistributing it. You can include it in a private, unpublished, package.

2. Looking at their website, the correct class for the icon is glyphicons glyphicons-notes-2

3. As a reference for including fonts and CSS, have a look at the package.js in the official Font Awesome package. The key part is this:

Package.onUse(function (api) {
  api.versionsFrom(['METEOR@0.9.2.1', 'METEOR@1.0']);
  api.addFiles([
    // we bundle all font files, but the client will request only one of them via the CSS @font-face rule
    'fonts/fontawesome-webfont.eot',  // IE8 or older only understands EOT. IE9+ will read it too because it loads the first occurrence of `src`
    'fonts/fontawesome-webfont.svg',  // SVG fallback for iOS < 5 - http://caniuse.com/#feat=svg-fonts, http://stackoverflow.com/a/11002874/1269037
    'fonts/fontawesome-webfont.ttf',  // Android Browers 4.1, 4.3 - http://caniuse.com/#feat=ttf
    'fonts/fontawesome-webfont.woff', // Most modern browsers

    'css/font-awesome.css'
  ], where);
});

Finally, there is already a package including Glyphicons halflings and the official Bootstrap package includes Glyphicons Free. Maybe there's an alternative icon you can readily use?