NativeScript + Vue.js + FontAwesome [英] NativeScript + Vue.js + FontAwesome

问题描述

我正在尝试使用FontAwesome图标集在NativeScript和Vue.js上构建应用程序，但由于我什至没有错误提示消息，所以无法解决问题.

I'm trying to use FontAwesome icon set to build an application over NativeScript and Vue.js but I can't figure out the problem since I not even have an error prompt message.

我正在忠实地遵循文档，但没有任何反应.我到处搜寻，但是..什么都没有.

I'm following the documentation as a faithful but nothing happens. I search everywhere but.. nothing.

如果您能帮助我，我将非常感激.

If you can help me with this I'd be so grateful.

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

谢谢！

解决方案

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

• Create a folder named fonts in the app folder
• Generate a style file and put the following code

.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的第一部分是命名字体系列，并以逗号开头，我们将写出这些字体的路径.

The font-family first part is to name the font family, and after the comma, we will write the path to those fonts.

推荐答案

要获得在NativeScript-Vue中工作的Brands和Pro FontAwesome 5字体，请按照文档使用Fonticons ， 并从FontAwesome下载网络字体和桌面字体.在目录app/fonts中，从Web下载的webfonts目录中添加.ttf文件. iOS还需要桌面下载的otfs目录中的.otf文件，因此也将这些文件也添加到app/fonts目录中，并重命名.otf文件的基本名称以匹配.ttf文件的相应基本名称.

To get the Brands and Pro FontAwesome 5 fonts working in NativeScript-Vue, install nativescript-fonticon, npm install nativescript-fonticon --save, as described in the documentation Using Fonticons, and from FontAwesome download both the webfonts and desktop fonts. In the directory app/fonts add the .ttf files from the webfonts directory of the web download. iOS also requires the .otf files from the otfs directory of the desktop download so add these to the app/fonts directory as well and rename the basename of the .otf files to match the corresponding basename of the .ttf file

在app/assets中，从Web字体下载的css目录中添加相应的CSS文件(或全部文件).

In app/assets add the corresponding css files from the css directory of the web font download (or the all file).

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

Now add the following to app.scss (note that light and solid don't work properly without font-weight properly defined)

.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目录，以确保所有内容正确捆绑在一起，您应该一切顺利.像这样使用

Now delete the platforms directory to make sure everything gets bundled correctly and you should be good to go. Use it like

  <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

To make things even easier there is plugin Vue-Fonticon that is essentially the following code which I copied into 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>

这篇关于NativeScript + Vue.js + FontAwesome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！