在角度项目上更改 svg 图标 fa-edit 的高度答案

【问题标题】：Change height of svg icon fa-edit on angular project在角度项目上更改 svg 图标 fa-edit 的高度
【发布时间】：2023-03-23 21:34:02
【问题描述】：

我需要将图标的高度编辑为 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

<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" 向下移动图标。

【问题讨论】：

【解决方案1】：

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

像这样：

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

【讨论】：

【解决方案2】：

任何搜索相同内容的人：

在该文档（Shifenis 提到）中，您可以使用 size 属性

 <fa-icon [icon]="['fas', 'coffee']" size="6x"></fa-icon>

更简单，更易读

【讨论】：

【解决方案3】：

这对我有用。

<fa-icon [icon]="faYoutube" class="fa-2x"></fa-icon>

【讨论】：

【解决方案4】：

这可能有点骇人听闻，但我可以通过更改字体大小来微调图标大小。这是可行的，因为图标大小与字体大小成正比。

    <fa-icon [icon]="faYoutube" style="font-size:1.5em"></fa-icon>

【讨论】：