Question on how to integrate font-awesome scss with components

[mconner]

Bug Report or Feature Request (mark with an x)

- [X ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.4.1
node: 6.11.2
os: win32 ia32
@angular/animations: 4.4.3
@angular/common: 4.4.3
@angular/compiler: 4.4.3
@angular/core: 4.4.3
@angular/forms: 4.4.3
@angular/http: 4.4.3
@angular/platform-browser: 4.4.3
@angular/platform-browser-dynamic: 4.4.3
@angular/router: 4.4.3
@angular/cli: 1.4.1
@angular/compiler-cli: 4.4.3
@angular/language-service: 4.4.3
typescript: 2.3.4

Repro steps.

I've got font-awesome installed, and am able to get it to work in the globals if I set the fa-font-path variable, relative to src/style.scss, before including:

$fa-font-path : '../node_modules/font-awesome/fonts';
@import 'tm-font-awesome/tm-font-awsome';

However, I'd like to use this at the component level, as well, so I was going to place the font path and the import, plus some of my own mixins in a file that I would then import: _my-font-awesome.scss

Unfortunately, it appears that the fa-font-path is relative to the root importer (style.scss, or app/my-component/my-component.scss), and is therefore not that same, depending on the path of the component. Is there some other way to do this so I don't have to set the $fa-font-path in every component?

The log given by the failure.

Desired functionality.

I would like to be able to import the font-awesome scss without having to define $fa-font-path everywhere.

Mention any other details that might be useful.

[gregbown]

The following steps work with cli ng serve and ejected Webpack build

1. The fonts should be copied to your src directory
2. The font awesome scss should also be located in your src
3. Your global scss should import font-awesome
   //Fontawesome
   @import 'font-awesome/font-awesome.scss';
4. Your path to font inside font-awesome/_variables.scss should be:
   $fa-font-path: "../fonts/font-awesome" !default;
   This should be the only place you will ever need to define the path provided the import is in global

src
    app
    environment
    fonts
        font-awesome
            fontawesome-webfont.eot
            fontawesome-webfont.ttf
            ...
    images
    scss
        font-awesome
            font-awesome.scss
            ...
        global.scss

then add to your assets in .angular-cli.json

  "assets": [
    "images",
    "fonts",
    "favicon.ico"
  ],

and add the global css that will be loaded into index.html

  "styles": [
    {"input": "styles/global.scss", "output": "styles/global.css"}
  ],

add markup to cli documentation link
<i class="fa fa-github" aria-hidden="true">
Notice the GitHub icon below

[mconner]

@gregbown: Adding the font-awsome source tree is not what I was looking to do, and goes against the reasons for using npm in the first place. Its also contrary to the way recommended in the Include Font Awesome story. But even ignoring that, your example doesn't show using mixins (or scss ) within a component and global at the same time, which is where the problem comes in. As I said, I already had the install working at the root level (src/style.scss). And I can get it working at the component level, if I define the font path there, relative to the component. I can import font-awsome from a partial, but I need to define the path differently for each component, depending on where its located:
This works:
src/app/comps/some-component/some-component.scss:

$fa-font-path : '../../../../node_modules/font-awesome/fonts';
@import '../foobar';

src/app/comps/_foobar.scss:
@import '../../../node_modules/font-awesome/scss/font-awesome';

and this works:
src/app/comps/some-component/some-component.scss:
@import '../foobar';

src/app/comps/_foobar.scss:

$fa-font-path : '../../../../node_modules/font-awesome/fonts'; // same path, though we are up one.
@import '../../../node_modules/font-awesome/scss/font-awesome';

All I'm looking for is a way to define the font path, relative to src (I tried /../node_modules/... etc), and that compiled, but then the icons did not actually show up. Either that or a is there a sass function I can use to get the relative path to path, and set the fa-font-path accordingly.

[mconner]

Did not mean to close

[hansl]

Have you tried using @import '~font-awesome/scss/font-awesome'?

[mconner]

So, I wasn't aware of the ~ notation (relatively new to angular-cli). That got rid of the ugly imports, but didn't solve the font path problem. However, by setting the font path also using this notation:
_tm-font-awesome.scss:

$fa-font-path : '~font-awesome/fonts';
@import '~font-awesome/scss/font-awesome'

that seems to do it (at least for font-awesome), Then, I can just import the partial, _tm_font-awesome.scss (which will also include some of my own mixins), in /src/style.scss or /src/components/somecomponent/somecomponent.scss, as needed.

This doesn't work for webfonts medical, which is not sass, but only css (or less), but also references a fonts directory, so I have to work around that (or maybe write my own sass version).

Thank you. I think this can be closed, as I think that provides the best solution for the immediate problem. However I'm curious if there's a similar notation for the project. I could see where it might be useful to use project root-level path, (e.g. @import '^/foo/somefile' means src/foo/_somefile.scss), so as to avoid any ambiguity with the relative path. I'm already using stylePreprocessorOptions, includePaths, with a "scss" entry.

[nikd-developer]

Use this.
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

[mtpultz]

Looks like it is now:

$fa-font-path : '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/fa-regular';
@import '~@fortawesome/fontawesome-free/scss/fa-solid';
@import '~@fortawesome/fontawesome-free/scss/fa-brands';

[ColinMorris83]

Thanks for the above, could not work out why the font files weren't coming through when just including fontawesome.scss.

Seems they have renamed the font files slightly, it's now this:

$fa-font-path : '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

[richardthombs]

Thanks for this @ColinMorris83 - I wish Fontawesome put this on their website!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}