How to add Icon Sets in Sage?

sage
1

Hi I was following this guide for animate.css, I did exactly as described

Step 1: Run yarn add ionicons
Step 2: Add Autoload file _font-ionicons.scss
with @import "~@import "~ionicons/dist/scss/ionicons";";
Step 3: Run yarn build / yarn run start

It seems like its compiling the css but is not fetching the fonts(i.e. .ttf, .woff etc.). What am I doing wrong ?

I tried the same thing with ‘Simple Line Icons’ & ‘Font Awesome 5’ same issue

I tried copying the font files into the fonts folder and declaring font-face property for each individual font sets nothing works!

2

Hey @Pratirup,

You’ll often need to modify the steps a little bit for each particular library. The best way to do it is to look at the docs for that library and then fit their instructions into how Sage has things set up.

If you run into problems after that, you might try Googling them to see if anyone (not just with Sage, but in general) has encountered and overcome the problem you’re having.

If you want to use Font Awesome, you can take a look here: How to: Use Font Awesome 5 in your Sage theme

As for Ionicons, it unfortunately doesn’t seem like they support adding it the way you would like to here. If you want to use their icons, your best bet might be to just enqueue the script they talk about in the “Installation” section of their docs.

2 Likes