Custom font from node_modules into angular-cli - css

Question

I have looked at several stackoverflow posts and github issues, but can't find something that is working for me.
I have a custom font that I'm using for icons that I'm installing via npm. These are the files in my folder a-icons in node_modules:
a-icon.css
a-icon.eot,
a-icon.ttf,
a-icon.woff,
a-icon.svg
In my main stylesheet I've added:
#import '~a-icons/a-icon';
#font-face {
font-family: 'a-icon';
src: url('../../../node_modules/a-icons/a-icon.eot');
src:
url('../../../node_modules/a-icons/a-icon.ttf') format('truetype'),
url('../../../node_modules/a-icons/a-icon.woff') format('woff'),
url('../../../node_modules/a-icons/a-icon.svg') format('svg');
}
#import '~a-icons/a-icon' is specifically giving me an error saying that it can't find the .eot, .ttf, .woff, .svg
This is one of the errors:
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/assets/stylesheets/global-styles.scss
Module not found: Error: Can't resolve './a-icon.eot' in '/Users/rmadan/a-one/a-platform/src/assets/stylesheets'
resolve './a-icon.eot' in '/Users/rmadan/a-one/a-platform/src/assets/stylesheets'
using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets)
using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets/a-icon.eot)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.js doesn't exist
as directory
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot doesn't exist
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.ts]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.js]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot]
# ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/assets/stylesheets/global-styles.scss 6:76081-76109
# ./src/assets/stylesheets/global-styles.scss
# multi ./src/assets/stylesheets/global-styles.scss ./node_modules/normalize.css/normalize.css
I'm using scss, but the font is in vanilla css.
I've also tried #import '../../../node_modules/a-icons/a-icon.css'; The icons show up as a square and I think that's because the font-family isn't recognized. So I added #font-face, but that it doesn't do anything.
I also tried changing angular-cli.json to include it in the assets and style:
"assets": [
"assets",
"assets/languages",
"assets/stylesheets",
"favicon.ico",
"environments/environment.values.js",
{
"glob": "a-icon.*",
"input": "../node_modules/a-icons",
"output": "./assets/a-icons"
}
"styles": [
"assets/stylesheets/global-styles.scss",
"../node_modules/normalize.css/normalize.css",
"../node_modules/a-icons/a-icon.css"
]
This doesn't do anything.

Answer 1

First, I advise you to create a single css file "fonts.css" in your node module, it will be simple to include a css file in your application rather than redefine the fonts and refer to N files (woff2, eot...ect), for example:
Your fonts.css:
#font-face {
font-family: 'a-icon';
src: url('a-icon.eot');
src:
url('a-icon.ttf') format('truetype'),
url('a-icon.woff') format('woff'),
url('a-icon.svg') format('svg');
}
Second, include the file "fonts.css" in your styles.css of your angular application as follows:
#import "~a-icons/fonts.css";
I have a similar solution that works fine, my node module contains a theme with fonts.

Answer 2

Why did you refer To a node module to get icons? The font is related to the theme of your application so it should be within your assets folder and then simply add: import the-name-font in your main stylesheet.
If you need to import external css files from node_modules, add their links in angular cli config file To import them in the assets folder and then import them in your main stylesheet from assets folder
Hope my response can help you