Nativescript Font Awesome 5 iphone 不工作

Posted 2023-04-13

【中文标题】Nativescript Font Awesome 5 iphone 不工作

【英文标题】：Nativecript Fontawesome 5 iphone not working

【发布时间】：2019-04-17 06:39:17

【问题描述】：

我正在尝试让 Font Awesome 5 在 android 上运行，但它不起作用。使用https://github.com/NathanWalker/nativescript-ngx-fonticon 包。

我的文件夹结构

- src
-- assets
-- fonts
-- app

assets 文件夹包含 fontawesome css (font-awesome.css)，我已经删除了“Font Awesome 使用 Unicode Private Use Area (PUA) 以确保屏幕 读者不会读出代表图标的随机字符”备注。

字体文件夹包含我从 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 上运行它时，我会得到 [?]

【问题讨论】：

尝试删除 fas 类定义，看看是否有帮助，因为它们共享相同的名称。

实际上 .fas 类使它可以在 android 上运行 :)

【参考方案1】：

终于有了：

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

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

【讨论】：

但是你能在 iPhone 上既正常又大胆地工作吗？我只能得到其中一个。 Android 工作正常，因为它使用 fa-regular-400 和 fa-regular-900 来查找字体。

"bold" 我明白你的意思。

我的 iphone 应用程序中不能有粗体图标和普通图标，只有一个或另一个

【参考方案2】：

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

我正在使用 Nativescript 和 VueJs

Font Awesome 版本：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 isf186

所以要使用它，你需要输入\uunicode => \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)
               

【参考方案3】：

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

在app/assets添加网页字体下载的css目录下对应的css文件（或all文件）。

现在将以下内容添加到app.scss（请注意，如果没有正确定义font-weight，light 和solid 将无法正常工作）

.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"
    :
    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>