Angular with FontAwesome: cannot style path

问题

I created a new project, installed font-awesome:

"@fortawesome/angular-fontawesome": "^0.4.0",
"@fortawesome/fontawesome-svg-core": "^1.2.19",
"@fortawesome/free-brands-svg-icons": "^5.9.0",

Imported FontAwesomeModule:

imports: [
    ...,
    FontAwesomeModule
],

And created a simple icon:

faFacebook = faFacebook;

<fa-icon [icon]="faFacebook"></fa-icon>

The icon is successfully showing. Now I want to style a path of the generated icon:

path {
  fill: red;
}

But it doesn't work. My Chrome doesn't even print this rule in developer tools.

How can I style path? I have to style exactly path, not fa-icon (to apply a gradient with fill: url(#gradient)).

回答1:

Angular offers by default encapsulation (emulation) of styles. It means each component is independent, and you won't have any conflict between 2 components in the same page. (if they use the same class name for instance).

https://angular.io/guide/component-styles

From Angular official documentation :

View encapsulation

As discussed earlier, component CSS styles are encapsulated into the component's view and don't affect the rest of the application.

To control how this encapsulation happens on a per component basis, you can set the view encapsulation mode in the component metadata. Choose from the following modes:

ShadowDom view encapsulation uses the browser's native shadow DOM implementation (see Shadow DOM on the MDN site) to attach a shadow DOM to the component's host element, and then puts the component view inside that shadow DOM. The component's styles are included within the shadow DOM.

Native view encapsulation uses a now deprecated version of the browser's native shadow DOM implementation - learn about the changes.

Emulated view encapsulation (the default) emulates the behavior of shadow DOM by preprocessing (and renaming) the CSS code to effectively scope the CSS to the component's view. For details, see Appendix 1.

None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

To style an element included inside a component, (and if this feature not provided by the component library it self), then you have 2 options :

1) Add your style to global styles.css

There is not any encapsulation for styles defined inside global styles.css.

In your component:

<fa-icon class="my-global-icon" [icon]="faFacebook"></fa-icon>

In your styles.css or styles.scss:

fa-icon.my-global-icon path {
  fill: red;
}

2) Disable encapsulation emulation

By default, encapsulation is active (emulated) on styles defined inside a component. To disable it, you should set encapsulation = ViewEncapsulation.None

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent  {
...

In this case, you will be able to style an sub element included in direct child of your component. But be careful, you could encounter other problems with style conflict. It's your job now to manage them.

Hope it will help.

回答2:

You can directly change the style of fontawesome icons by passing [style] attribute as shown below.

<fa-icon [icon]="faFacebook" [styles]="{'stroke': 'red', 'color': 'red'}">
</fa-icon>

来源：https://stackoverflow.com/questions/56828270/angular-with-fontawesome-cannot-style-path

标签

angular

angular-fontawesome