Nativecript Fontawesome 5 iphone не работает

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 Private Use Area (PUA), чтобы программы чтения с экрана не считывали случайные символы, представляющие значки». Замечание.

Папка fonts содержит все файлы шрифтов (eot / svg / ttf / woff /woff2) Я скачал с сайта Font Awesome 5 (fa-бренды / fa-регулярные / fa-solid)

В моем основном файле 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

Вот как я это сделал, потому что , что не сработало для меня.

Я использую 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)
       }

Если вы ищете значок , вы увидите Unicode. Вы должны скопировать это.

Пример Unicode для Луны: 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 2

Чтобы заставить шрифты Brands и Pro FontAwesome 5 работать в NativeScript-Vue, установите nativescript-fonticon, npm install nativescript-fonticon --save, как описано в документации Использование Fonticons , и из FontAwesome загрузите как веб-шрифты, так и рабочий столшрифты.В каталог app/fonts добавьте файлы .ttf из каталога webfonts веб-загрузки.iOS также требует файлы .otf из каталога otfs загрузки рабочего стола, поэтому добавьте их также в каталог app/fonts и переименуйте базовое имя файлов .otf в соответствии с соответствующим базовым именем файла .ttf

В app/assets добавьте соответствующие файлы 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>

Answer 3

Наконец-то есть:

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

Первый («Font Awesome 5 Free») необходим для iPhone, а fa-solid-900 - для Android.