Nativecript Fontawesome 5 iphone not working

问题

I'm trying to get Font Awesome 5 to work on android but it's not working. Using the https://github.com/NathanWalker/nativescript-ngx-fonticon package.

My folder structure

- src
-- assets
-- fonts
-- app

The assets folder contains the fontawesome css (font-awesome.css), I've removed everything above the "Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons" remark.

The fonts folder contains all the fontfiles (eot / svg / ttf / woff / woff2) I've downloaded from Font Awesome 5 website (fa-brands / fa-regular / fa-solid)

In my main scss file I have a line :

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

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

In my app.module.ts :

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

and import :

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

Now in my HTML:

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

I've also modified my webpack config to copy and watch the src/assets/ folder:

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

So when I run this on my iPhone I get [?]

回答1:

Finally have it :

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

The first one ("Font Awesome 5 Free") is needed for iPhone and fa-solid-900 is needed for Android.

回答2:

This is how I did it because that didn't worked for me.

I'm using Nativescript and VueJs

Version of Font Awesome: 5.4.2

You will need to following fonts:

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

You need to place them app>fonts

Add this to 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;
}

You can change the font-size.

So how to use in the template?

A few examples:

<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)
       }

If you search an icon you will see the unicode. You need to copy that.

Example the Unicode for moon is f186

So to use it you will need to typ \u{unicode} => \uf186

it will only work if use the attribute :text and the function unescape.

Multi line buttons

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

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

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

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;
}

and the following to 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);

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>

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>

To use it, in main.ts add

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

Vue.component(FontIcon.name, FontIcon)

and use it as

  <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>

来源：https://stackoverflow.com/questions/53297794/nativecript-fontawesome-5-iphone-not-working

标签

android

iphone

font-awesome

nativescript