html - 更改 Angular 元素上 svg 图标 fa-edit 的高度

Question

我需要的是将图标的高度编辑为 1.5em 而不是 1em。但我似乎找不到 .svg-inline--fa。我没有任何用于图标的 CSS 文件，因为我使用了 npm install。

我运行以下载 Angular 上的 svg 图标的命令

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome

Fortawesome: https://github.com/FortAwesome/Font-Awesome

<fa-icon [icon]="faEdit" size="lg" (click)="open(content)">Edit</fa-icon>

当我检查元素时，这是图标的 CSS

.svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em
}

也进口 import { faEdit } from '@fortawesome/free-solid-svg-icons';到我的组件 ts

更新:使用例如transform="down-5"将图标向下移动。

Answer 1

您可以使用 transform 编辑图标的大小在你的 html 组件中。

像这样:

<fa-icon [icon]="['fas', 'coffee']" transform="shrink-9 right-4"></fa-icon>

查询 fontawesome advanced usage