11

我正在尝试使用 FontAwesome 图标集在 NativeScript 和 Vue.js 上构建应用程序，但我无法找出问题所在，因为我什至没有错误提示消息。

我忠实地遵循文档，但没有任何反应。我到处搜索，但......什么都没有。

如果你能帮我解决这个问题，我将不胜感激。

文档：https ://nativescript-vue.org/blog/using-fonticons/

谢谢！

解决方案

  • 在app文件夹中创建一个名为fonts的文件夹
  • 生成样式文件并放入以下代码

.fa { font-family: 'Font Awesome 5 Free', 'font-awesome/fa-regular-400'; }
.fas { font-family: 'Font Awesome 5 Free', 'font-awesome/fa-solid-900'; }
.fab { font-family: 'Font Awesome 5 Free', 'font-awesome/fa-brands-400'; }

font-family 第一部分是命名字体系列，在逗号之后，我们将写入这些字体的路径。

4

2 回答 2

16

要让 Brands 和 Pro FontAwesome 5 字体在 NativeScript-Vue 中工作，请按照文档Using Fonticonsnativescript-fonticon中的说明安装, ，然后从 FontAwesome 下载 webfonts 和桌面字体。在目录中添加来自网络下载目录的文件。iOS 还需要桌面下载目录中的文件，因此也将这些文件添加到目录中，并重命名文件的基本名称以匹配文件的相应基本名称 npm install nativescript-fonticon --saveapp/fonts.ttfwebfonts.otfotfsapp/fonts.otf.ttf在此处输入图像描述

从网页字体下载目录（或all文件）中 app/assets添加相应的css文件。css在此处输入图像描述

现在添加以下内容（请注意，如果没有正确定义app.scss，light 和solid 将无法正常工作）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"/>
    <FontIcon name="fa-play" type="fal"/>
    <FontIcon name="fa-play" type="fas"/>
    <FontIcon name="fa-git" type="fab"/>
  </StackLayout>
于 2019-03-22T21:22:47.550 回答
3

它使用 FontAwesome 4.7.0 对我有用。从 5.0 版本开始，font awesome 的封装发生了变化，不再推荐使用 ttf 的方式，也许在 nativescript-vue 中使用 font awesome 5.x 更加棘手。

你可以在那里下载：https ://fontawesome.com/v4.7.0/

按照文档中的说明使用 fontawesome-webfont.ttf 并将其重命名为 FontAwesome.ttf，也复制 font-awesome.min.css

在您的 app.scss 中，不要忘记这一点（字体系列是您的 ttf 文件的名称）

.fa {
   font-family: FontAwesome;
}

记得检查 v4.7 上的图标名称，有些是 v5 中的新名称

在调试模式下，当您的应用启动时，您应该看到：

JS: 'Collections to load: fa'
JS: '----------'
JS: 'Loading collection \'fa\' from file: ./fonts/FontAwesome.css'
JS: 'fa-glass: \\uf000'
JS: 'fa-music: \\uf001'
JS: 'fa-search: \\uf002'
JS: 'fa-envelope-o: \\uf003'
...
于 2018-10-09T12:10:02.747 回答