How to display font-awesome icons [SOLVED]


#1

Hi,

I am creating a new package for Atom and i want to display icon in it.

What is the best way to include font-awesome (or other fonts) in my package ?

In the package.json, I tried to add “font-awesome” but I don’t know how to include it in my .less file (I can write the path to the “node_modules” folder but I don’t think it’s good to do that).

Also, i don’t think if adding fa in the dependencies is the best way to do it because if there are 10 packages who do that, Atom will download 10 times the same dependencies (maybe Atom already handle that problem?)…

I am thinking about few solutions:

  • add fa in the dependencies
  • create a “ressource” folder and put the font file
  • write a package who will do that and “include” it in mine (only we can include other package)

#2

Take a look at my file-type-icons package that includes FontAwesome as well as a couple others for how to do this.


#3

Ok, thanks for your answer.

So, I looked code of many packages.
They put the .woff file in a “ressources” folder and they load it in the .less file.

But, I found something interesting:
If I install a package who load FontAwesome then in my package I can use the font like this:

.fa { font-family: "FontAwesome"; }

I also saw that we can include other packages in dependencies, by adding this code in the package.json:
(why it’s not in the doc??)

"packageDependencies": {
  "packageName": "version"
 }

Why, we don’t create a package who will juste load .woff file and add this package in dependencies?

Like that, every package who use FontAwesome have just to add a dependency.
We can also do that for other fonts (one package per font) like IcoMoon, DevIcon, etc

I will create a package to test…

EDIT:
In the doc, they said that we have to add font in a “resources” directory: https://atom.io/docs/v0.186.0/creating-a-package#bundle-external-resources

Sources for the packageDependencies:



#4

packageDependencies is in there for when apm is going to support that. It isn’t right now.


#5

Ok, thanks for your anwser.

The solution:

  1. Add the font that you want to load into the “resources” folder

  2. In your .less, load the font like this:

    @font-face {
    font-family: ‘TheNameOfYourFont’;
    src: url(atom://name-of-your-plugin/resources/fontName.woff) format(‘woff’);
    }

  3. Now you can use your font like this:

    .element { font-family: “FontAwesome”; }

(sorry to answer after one week)


Including Font-Awesome in Electron Build