Including Font-Awesome


#1

I am working on a package, atom-playlist, that will be using Font-Awesome.

To use font awesome I installed it with bower which made sense to me because FA is a client side dependency in most projects. I attempted to include FA in several ways I will outline here :

In my playlist.coffee (main) file I added :

wV = atom.workspaceView
wV.append(util.format '<link rel="stylesheet" type="text/css" href="%s">',
  'atom://components/fontawesome/css/font-awesome.min.css')

here.

This did not work properly because :

> Refused to load the stylesheet 'atom://components/fontawesome/css/font-awesome.min.css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'".

So I attempted to include FA via a less @import statement within my main.less file.

@import "../bundle/components/fontawesome/less/font-awesome.less";
@fa-font-path: "atom://playlist/bundle/components/fontawesome/fonts";

That @import statement is working, though the font files cannot be resolved. I am attempting to override the @fa-font-path variable so they may be resolved, though I cannot determine the correct path.

My project structure :

.
β”œβ”€β”€ Gruntfile.coffee
β”œβ”€β”€ README.md
β”œβ”€β”€ bower.json
β”œβ”€β”€ bundle
β”‚Β Β  └── components
β”‚Β Β      └── fontawesome
β”œβ”€β”€ keymaps
β”‚Β Β  └── main.cson
β”œβ”€β”€ lib
β”‚Β Β  β”œβ”€β”€ playlist.coffee
β”‚Β Β  └── view
β”‚Β Β      β”œβ”€β”€ queue.coffee
β”‚Β Β      β”œβ”€β”€ search.coffee
β”‚Β Β      β”œβ”€β”€ search_result.coffee
β”‚Β Β      └── track.coffee
β”œβ”€β”€ menus
β”‚Β Β  β”œβ”€β”€ app.cson
β”‚Β Β  └── context.cson
β”œβ”€β”€ package.json
β”œβ”€β”€ spec
β”‚Β Β  └── playlist-spec.coffee
└── stylesheets
    └── main.less

Where bundle/components is the location of my bower components.

The resulting style tag contains :

/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('atom://playlist/bundle/components/fontawesome/fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('atom://playlist/bundle/components/fontawesome/fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('atom://playlist/bundle/components/fontawesome/fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('atom://playlist/bundle/components/fontawesome/fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('atom://playlist/bundle/components/fontawesome/fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Though this is not properly resolving and I am not sure why? Any help is appreciated.


#2

So I have gotten Font-Awesome working via :

@import "../bundle/components/fontawesome/less/font-awesome.less";
//@fa-font-path: "atom://playlist/bundle/components/fontawesome/fonts";
@fa-font-path: "file:///Users/dawson/develop/projects/personal/atom-playlist/bundle/components/fontawesome/fonts";

Which generates :

/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('file:///Users/dawson/develop/projects/personal/atom-playlist/bundle/components/fontawesome/fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('file:///Users/dawson/develop/projects/personal/atom-playlist/bundle/components/fontawesome/fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('file:///Users/dawson/develop/projects/personal/atom-playlist/bundle/components/fontawesome/fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('file:///Users/dawson/develop/projects/personal/atom-playlist/bundle/components/fontawesome/fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('file:///Users/dawson/develop/projects/personal/atom-playlist/bundle/components/fontawesome/fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Though this is not a proper solution because it requires an absolute path. I currently have apm linked the playlist project so I may develop on it. I believe the issue may be related.


#3

Here’s how I include Font Awesome in one of my packages:

Which I got from @DanBrooker’s File Icons package.


#4

Thank you!

I have succeeding in making FontAwesome work with:

@import "../bundle/components/fontawesome/less/font-awesome.less";
@fa-font-path: "atom://playlist/bundle/components/fontawesome/fonts";

@font-face {
  font-family: 'Font Awesome';
  font-weight: normal;
  font-style: normal;
  src: url('@{fa-font-path}/fontawesome-webfont.woff') format('woff');
}
.fa {
  font-family: 'Font Awesome';
}

Awesome!!


Will bitmap fonts eventually be available?
#5

@Glavin001 & @leedohm thank you very much!


#6

I wonder if a font-awesome atom package for use as a dependency would be a good idea


#7

Is there a method for creating Atom package dependencies yet? I thought there was only Node dependencies?

For clarity, I mean dependencies in the package.json so that they are automatically installed when the package is installed.


#8

:+1: It is indeed a good idea. I’ve installed several packages that relies on font-awesome. When using bootstrap, you always end up using font-awesome. Mutualizing NPM’s modules in the core would end up in a faster loading time and easier package writing. I even rely on font-awesome for one of my package.