Angular-cli - How to link font icons inside the assets folder to css

Question

How do I link a font file inside the assets folder to my css?

My folder structure is as follows,

src
 - assets
 -- fontfile.eot
 - styles
 -- fontstyles
 --- fonts.scss

But when I link fontfile.eot in fonts.scss,

@font-face {
  font-family: 'myicons';
  src:  url('../../assets/fontfile.eot');
}

It throws this error,

Module not found: Error: Can't resolve '../../assets/fonts/fontfile.eot' in 'myproject/src/styles'

Same error comes when I move the fontfile inside the styles folder and link it.

src:  url('./fontfile.eot');

How do I link my font to my css?

I'm using angular-cli.

Answer 1

Try the following, I'm thinking you don't need quotes in the URL:

@font-face {
  font-family: 'myicons';
  src:  url(../../assets/fontfile.eot) format("embedded-opentype");
}