自定义 FontAwesome 图标不呈现

Question

更新：

我基于 FontAwesome 的合作者 instructions here 创建了一个 SVG 图标，但似乎无法在 HTML 中呈现。尽管它将确切的元素树显示为 FontAwesome 自己的图标。

所以我在 assets/icons/

中创建了一个图标，如下面的 tiktok.ts

import { IconDefinition } from '@fortawesome/fontawesome-svg-core';

export const faTiktok: IconDefinition = {
    prefix: 'fab',
    iconName: 'tiktok',
    icon: [
        512,
        512,
        [],
        'U+E002',
        'M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'
    ],
} as any

并像

一样导入 component.ts

import { faTiktok } from 'assets/icons/tiktok';

在component.ts

中为其赋值变量

并在 HTML 中用作

<fa-icon [icon]="faTiktok" matSuffix size='2x'></fa-icon>

所有这些都显示与其他 FontAwesome 图标相同的元素树，但不会在页面上呈现。

我在线测试了路径并且正确呈现了图标。

知道我可能错过了什么吗？

Answer 1

问题是您错误地指定了 SVG 视图框的尺寸。您的图标已呈现，它只是亚像素大小，因此您看不到它。

要解决此问题，请在图标定义中设置正确的视图框尺寸（对于这个特定图标来说，它看起来是 24x24）：

export const faTiktok: IconDefinition = {
    prefix: 'fab',
    iconName: 'tiktok',
    icon: [
        24,
        24,
        [],
        'U+E002',
        'M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'
    ],
} as any

有关工作示例，请参阅 StackBlitz。

自定义 FontAwesome 图标不呈现

Custom FontAwesome icon doesn't render

svg

angular

angular-fontawesome