1

我创建了一个新项目，安装了 font-awesome：

"@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)）。

4

2 回答 2

1

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

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

来自 Angular 官方文档：

查看封装

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

要在每个组件的基础上控制这种封装的发生方式，您可以在组件元数据中设置视图封装模式。从以下模式中选择：

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

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

  • 模拟视图封装（默认）通过预处理（和重命名）CSS 代码来模拟影子 DOM 的行为，从而有效地将 CSS 限定在组件的视图中。详见附录 1。

  • None 意味着 Angular 没有视图封装。Angular 将 CSS 添加到全局样式中。前面讨论的范围规则、隔离和保护不适用。这本质上与将组件的样式粘贴到 HTML 中相同。

要为组件中包含的元素设置样式（并且如果组件库不提供此功能），那么您有 2 个选项：

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

在 global 中定义的样式没有任何封装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  {
...

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

希望它会有所帮助。

于 2019-06-30T22:19:30.677 回答
0

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

<fa-icon [icon]="faFacebook" [styles]="{'stroke': 'red', 'color': 'red'}">
</fa-icon>
于 2019-07-05T02:20:11.913 回答