FontAwesome角:不能样式路径

Question

我创建了一个新项目，安装了字体-太棒了：

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

进口FontAwesomeModule

imports: [
    ...,
    FontAwesomeModule
],

并创建了一个简单的图标：

faFacebook = faFacebook;

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

图标正在成功显示。现在，我想为生成的图标设置一个path：

path {
  fill: red;
}

但不起作用。我的Chrome甚至没有在开发工具中打印这条规则。

我如何设计path的样式？我必须准确地样式path，而不是fa-icon (用fill: url(#gradient)应用渐变)。

Answer 1

角提供默认的封装(模拟)风格。这意味着每个组件都是独立的，并且在同一个页面中的两个组件之间不会有任何冲突。(例如，如果它们使用相同的类名)。

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

从角度上的正式文件：

视图封装 如前所述，组件CSS样式封装到组件的视图中，不影响应用程序的其余部分。 要控制这种封装是如何在每个组件的基础上进行的，可以在组件元数据中设置视图封装模式。从下列模式中选择：

• ShadowDom视图封装使用浏览器的本机影子DOM实现(请参阅MDN站点上的shadow DOM )将影子DOM附加到组件的主机元素，然后将组件视图放入该影子DOM中。组件的样式包含在阴影DOM中。
• 本机视图封装使用了浏览器本机阴影DOM实现的现在不再推荐的版本--了解这些更改。
• 模拟视图封装(默认)通过预处理(并重命名) CSS代码来模拟影子DOM的行为，从而有效地将CSS范围调整到组件的视图。详情见附录1。
• 不意味着角度没有视图封装。角将CSS添加到全局样式中。前面讨论的范围规则、隔离和保护不适用。这与将组件的样式粘贴到HTML中本质上是一样的。

若要对组件中包含的元素进行样式设置(如果组件库it self未提供此功能)，则有两个选项：

将您的样式添加到全局styles.css中1)

在全局styles.css中定义的样式没有任何封装。

在你的组成部分中：

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

在styles.css或styles.scss中

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

2)禁用封装仿真

默认情况下，在组件中定义的样式上，封装是活动的(模拟的)。要禁用它，您应该设置encapsulation = ViewEncapsulation.None

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

在这种情况下，您将能够为包含在组件的直接子元素中的子元素设置样式。但是要小心，你可能会遇到其他与风格冲突的问题。你现在的工作就是管理它们。

希望能帮上忙。

Answer 2

您可以通过传递样式属性直接更改字体图标的样式，如下所示。

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