Question

更新：

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

所以我在tiktok.ts的{{1}}中创建了一个类似于以下内容的图标

assets/icons/

并像

一样导入

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

在component.ts中为其分配了变量

，并在HTML中用作

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

所有这些都显示与其他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图标无法呈现

1 个答案: