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

Angular默认提供样式的封装（仿真）。这意味着每个组件都是独立的，并且同一页面中的两个组件之间不会有任何冲突。（如果它们使用相同的类名）。

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

来自Angular官方文档：

查看封装

如前所述，组件CSS样式封装在组件的视图中，不会影响应用程序的其余部分。

要控制每个组件的封装方式，可以在组件元数据中设置视图封装模式。从以下模式中选择：



ShadowDom视图封装使用浏览器的本机影子DOM实现（请参见MDN站点上的Shadow DOM）将影子DOM附加到组件的宿主元素，然后将组件视图放入该影子DOM中。组件的样式包含在阴影DOM中。



本机视图封装使用的浏览器本机影子DOM实现现已弃用-了解更改。



仿真视图封装（默认）通过预处理（和重命名）CSS代码以有效地将CSS范围限定在组件的视图上，从而模拟了影子DOM的行为。有关详细信息，请参见附录1。



None表示Angular不进行视图封装。 Angular将CSS添加到全局样式中。先前讨论的范围规则，隔离和保护不适用。这基本上与将组件的样式粘贴到HTML中相同。

要设置组件中包含的元素的样式（如果组件库本身未提供此功能），则有2个选项：

1）将样式添加到全局styles.css

在全局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

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

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

FontAwesome的角度：无法设置路径样式

2 个答案: