I remove the existing sass task and just replaced it with your example. The issues with the includePath were Webstorm specific. I am still trying different IDEs to find my favorite one.
I used the provide example with the <i> element. That’s alright
This has been a very helpful thread. I’m trying to implement the weather-icons font in my project. But I’m stuck because, unlike font-awesome, they use less. there is a pre-compiled css file however. Any clue how I can include it with the sass gulp task?
Good Morning. I tried to carry out this step by step, but my project can not find the the Font Awesome files. He can find it in the folder node_modules still on the app icon appears only a square, as if he had not caught the family source.
In the ‘ionic serves’ it shows the message that failed to find or the file is unreadable.
Well that could have an official topic on the use of custom fonts, it is something that everyone uses.
@daniel_rf121 Have you added @import "font-awesome" in your app/theme/app.core.scss file? Have you updated both your sass and files tasks in gulpfile.js as explained in the following comment? Also make sure that you’re using them correctly, e.g.:
Yes, I performed all the steps. Font Awesome installed via NPM, then I added the codes in gulpfile and used the @import in the core. still displaying the error:
Starting ‘sass’…
app/theme/app.core.scss
Error: File to import not found or unreadable: font-awesome
Parent style sheet: /Users/danielrodrigues/Projects/funlife-ionic/app/theme/app.core.scss
on line 10 of app/theme/app.core.scss
@daniel_rf121 Actually after looking closer at this, you should use only @import "font-awesome"; if you configured both sass and files tasks properly in gulpfile.js. Also note that you should not just add the code from the comment to your gulpfile.js - you have to replace the existing tasks with the same names (or delete these). And check if the FontAwesome font files are copied to your www/build/fonts folder.
Good evening my friend, I managed to make it work. I removed the lines you listed, deleted the build folder, then run the ionic serve command again. The gulp could import sources to the folder just right. Now I will try to make the import of icomoon.
I followed the same steps, but using other type of font (google maven), which is local under my app folder. I then copied all the fonts with the gulp task to www/build/fonts.
In the app.variable I tried to set $font-family-base to have my custom font name.
When I run the app and debug it, my custom font is there, but current font-family is still the old one.
@tim@brandyshea
the projects, generated with the new ionic-cli 2.1, using ionic 2.0.0-rc.0 do not have gulpfile.js anymore. What is the way to add custom fonts and icons now?
I must use both font-awesome and other custom fonts in my application, so it’s really important to know how to do it with the new build process.
Thanks!
Edit: I found out that everything from the src/assets/ directory is already configured to be copied in the www/assets/ directory, so custom fonts can be just dropped there and referenced from the scss file.
Still wondering how to use fonts and scss from external libraries, installed with npm, like font-awesome.
Yes, it’s always an option to copy the font-awesome’s files in the /src/assets directory. But I would like to know how to use it as npm package instead, because I would not like to mix my own code with library code and I would like to manage it via npm and update it easier.
At this point it’s still not clear to me if there’s a way to do it, because the gulpfile.js is removed from the new build process and there are no overridable configurations of the new build tasks at project level.