NativeScript + Angular：如何安装和使用图标？

Posted 2023-02-19

【中文标题】NativeScript + Angular：如何安装和使用图标？

【英文标题】：NativeScript + Angular: How to install and use icons?

【发布时间】：2020-06-05 19:44:55

【问题描述】：

我正在尝试在我的 nativescript + angular 应用上使用适用于 ios 和 android 的图标。 我尝试了不同的方式来设置图标，我使用了这个tutorial，这个solution，我什至尝试了material plugin和nativescript-ngx-fonticon。

所有这些方法都给我这个错误：

插件 nativescript-fontawesome 不包含在预览应用中 设备 [device-id] 并且不会工作。

现在，这是我当前的代码：

mycomponent.component.html

<Button text="&#xf810" class="fa" column="0"></Button>

app.css

.fa 
    font-family: 'FontAwesome', fontawesome-webfont;
 

此外，我的 app/fonts 文件夹中有以下文件：

fontawesome-webfont.ttf

那么，怎么了？

谢谢

【问题讨论】：

我认为你对材料图标和真棒字体图标感到困惑

***.com/questions/41861386/…

@alexander.sivak 我已经点击了你发给我的链接，它不起作用

@Fmerco 不，我并不感到困惑。我尝试了 FontAwesome 和 Material Icons 两种解决方案...同样的问题

@Silvia 你提供的例子与错误不一致

【参考方案1】：

不再需要插件。 NativeScript 支持图标字体。 https://v7.docs.nativescript.org/angular/ui/ng-components/icon-fonts

从“下载 Font Awesome Free for the Web”框中的 https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself 下载适用于 Web 的 FontAwesome 字体。

将 *.ttf 文件保存在src/fonts:

fa-regular-400.ttf fa-brands-400.ttf fa-solid-900.ttf

将这些行添加到您的 app.css

.far 
    font-family: Font Awesome 5 Free, fa-regular-400;
    font-weight: 400;


.fab 
    font-family: Font Awesome 5 Brands, fa-brands-400;
    font-weight: 400;


.fas 
    font-family: Font Awesome 5 Free, fa-solid-900;
    font-weight: 900;

您现在可以使用

<!-- Using fa-solid-900.ttf -->
<Button text="&#xf810;" class="fas"></Button>