Question

我正在尝试让Font Awesome 5在android上运行，但无法正常工作。使用https://github.com/NathanWalker/nativescript-ngx-fonticon软件包。

我的文件夹结构

- src
-- assets
-- fonts
-- app

assets文件夹包含fontawesome css（font-awesome.css），我删除了“ Font Awesome使用Unicode专用区域（PUA）以确保屏幕上方读者不会阅读代表图标的随机字符。

fonts文件夹包含我从Font Awesome 5网站（fa-brands / fa-regular / fa-solid）下载的所有字体文件（eot / svg / ttf / woff / woff2）

在我的主要scss文件中，有一行：

.fa {
    font-family: FontAwesome, fontawesome-webfont;
}

.fas {
    font-family: FontAwesome, fa-solid-900;
}

在我的app.module.ts中：

import { TNSFontIconModule , TNSFontIconService } from 'nativescript-ngx-fonticon';
TNSFontIconService.debug = true;

并导入：

    TNSFontIconModule.forRoot({
        'fa': './assets/font-awesome.css'
    })

现在在我的HTML中：

<Label  class="fas" [text]="'fa-bars' | fonticon" color="#2c0239"></Label>

我还修改了我的webpack配置，以复制并观看src / assets /文件夹：

    new CopyWebpackPlugin([
        { from: "assets/**"},
        { from: "fonts/**" },
        { from: "**/*.jpg" },
        { from: "**/*.png" },
    ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),

所以当我在iPhone上运行它时，我会得到[？]

Answer 1

最后拥有它：

.fas {
    font-family: "Font Awesome 5 Free", fa-solid-900;
}

iPhone需要第一个（“ Font Awesome 5 Free”），Android需要fa-solid-900。

Answer 2

这是我这样做的原因，因为that对我不起作用。

我正在使用Nativescript和VueJs

真棒字体版本： 5.4.2

您将需要以下字体：

fa-regular-400
fa-brands-400
fa-solid-900

您需要将它们放置app>fonts

将此添加到app>app.css

.far {
     font-family: 'Font Awesome 5 Free', fa-regular-400;
     font-size: 40em;
}

.fab {
    font-family: 'Font Awesome 5 Brands', fa-brands-400;
    font-size: 40em;
}

.fas {
    font-family: 'Font Awesome 5 Free', fa-solid-900;
    font-size: 40em;
}

您可以更改font-size。

那么如何在模板中使用？

一些例子：

<Label class="fab" :text="'\uf060' | unescape"></Label>
<Label class="fab" :text="'\uf170' | unescape"></Label>
<Label class="fab" :text="'\uf36e' | unescape"></Label>

filters: {
           unescape: v => unescape(v)
       }

如果您search an icon，您将看到unicode。您需要复制它。

示例Unicode for moon is f186

因此，要使用它，您需要输入\u{unicode} => \uf186

仅在使用属性:text和函数unescape时有效。

多行按钮

       <Button class="btn">
            <FormattedString>
                <span class="fas" :text="'\u[ICONCODE]' | unescape" ></span>
                <span :text="'\n [TEXT]' | unescape" ></span>
            </FormattedString>
        </Button>

        filters: {
                   unescape: v => unescape(v)
               }

Answer 3

要使Brands和Pro FontAwesome 5字体在NativeScript-Vue中工作，请按照文档Using Fonticons中所述安装nativescript-fonticon，npm install nativescript-fonticon --save，并从FontAwesome下载网络字体和桌面字体。在目录app/fonts中，从Web下载的.ttf目录中添加webfonts个文件。 iOS还需要桌面下载的.otf目录中的otfs文件，因此也将它们添加到app/fonts目录中，并重命名.otf文件的基本名称以匹配.ttf文件的相应基本名称

在app/assets中，从Web字体下载的css目录中添加相应的css文件（或全部文件）。

现在将以下内容添加到app.scss中（请注意，如果未正确定义font-weight，则光线和固体将无法正常工作）

.fa {
  font-family: "Font Awesome 5 Pro", "fa-regular-400";
  font-weight: 400;
}

.fas {
  font-family: "Font Awesome 5 Pro", "fa-solid-900";
  font-weight: 900;
}

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

.fal {
  font-family: "Font Awesome 5 Pro", "fa-light-300";
  font-weight: 300;
}

及以下main.ts

import {TNSFontIcon, fonticon} from 'nativescript-fonticon';

TNSFontIcon.debug = true;
TNSFontIcon.paths = {
  // 'fa': './assets/css/all.min.css',
  // 'fal': './assets/css/all.min.css',
  // 'far': './assets/css/all.min.css',
  // 'fas': './assets/css/all.min.css',
  // 'fab': './assets/css/all.min.css',
  'fa': './assets/css/fontawesome.min.css',
  'fal': './assets/css/light.min.css',
  'far': './assets/css/regular.min.css',
  'fas': './assets/css/solid.min.css',
  'fab': './assets/css/brands.min.css'
};
TNSFontIcon.loadCss();

Vue.filter('fonticon', fonticon);

现在删除platforms目录以确保所有内容都正确捆绑在一起，您应该一切顺利。像这样使用

  <StackLayout orientation="horizontal" horizontalAlignment="center" verticalAlignment="top">
    <Label class="fab" :text="'fa-git' | fonticon" />
    <Label class="fal" :text="'fa-plus-square' | fonticon" />
    <Label class="fa" :text="'fa-plus-square' | fonticon" />
    <Label class="fas" :text="'fa-plus-square' | fonticon" />
  </StackLayout>

为了使事情变得更加简单，有一个插件Vue-Fonticon，它基本上是我复制到app/components/FontIcon.vue中的以下代码

<template>
  <Label
    :class="type"
    :color="color"
    :fontSize="size"
    :text="name | fonticon"
    :width="size"
    textAlignment="center"
    @tap="$emit('tap')"
  />
</template>

<script>
  export default {
    name: 'FontIcon',
    props: {
      color: {
        type: String,
        default: 'black'
      },
      name: {
        type: String,
        required: true
      },
      size: {
        type: [String, Number],
        default: 15,
        validation: s => !isNaN(s)
      },
      type: {
        type: String,
        default: 'fa'
      }
    }
  }
</script>

要使用它，请在main.ts中添加

import FontIcon from './components/Utility/FontIcon.vue'

Vue.component(FontIcon.name, FontIcon)

并将其用作

  <StackLayout orientation="horizontal" horizontalAlignment="center" verticalAlignment="top">
    <FontIcon name="fa-play" size="16" color="red"/>
    <FontIcon name="fa-play" type="fal" size="32" color="green"/>
    <FontIcon name="fa-play" type="fas" size="64" color="blue"/>
    <FontIcon name="fa-git" type="fab" @tap="tapHandler"/>
  </StackLayout>

Nativecript Fontawesome 5 iPhone无法正常工作

3 个答案:

那么如何在模板中使用？

多行按钮