Подтвердить что ты не робот

Использование font-awesome в ионной 2

Как я могу использовать fontawesome с ionic 2, я следую этот учебник, но он не работает.

4b9b3361

ОТВЕТЫ

Ответ 1

Обновление в ионном 2 RC.0

  • Загрузите библиотеку шрифтов-awesome.
  • Создайте папку "fonts" в src/assets и скопируйте шрифты из папки font-awesome/fonts
  • Скопируйте папку scss и вставьте ее под src/theme/scss
  • Откройте файл variables.scss и скопируйте приведенный ниже код.

@import "scss/font-awesome"; @Шрифт-лицо {font-family: 'FontAwesome'; ЦСИ: URL ( '?../активы/шрифты/fontawesome-webfont.eot v = # {$ фа-версия}');
ЦСИ: URL ( '../активы/шрифты/fontawesome-webfont.eot # iefix &? v = # {$ фа-версия}') Формат ( 'погруженного OpenType'),
URL ( '../активы/шрифты/fontawesome-webfont.woff2? v = # {$ фа-версия}') Формат ( 'woff2'),
URL ( '../активы/шрифты/fontawesome-webfont.woff? v = # {$ фа-версия}') Формат ( 'Уофф'),
URL ( '../активы/шрифты/fontawesome-webfont.ttf? v = # {$ фа-версия}') Формат ( 'TrueType'),
URL ( '../активы/шрифты/fontawesome-webfont.svg? v = # {$ фа-версия} #fontawesomeregular') Формат ( 'SVG'); font-weight: normal; font-style: normal; }

Чтобы включить значок в HTML

  <i primary class="fa fa-cart-plus fa-lg"></i>

Ионная бета

Установите fontAwesome из библиотеки npm.

Измените приведенные ниже изменения в gulpfile.ts.

  • Включить задачу gulp для добавления иконки css и шрифтов в вашу сборку
gulp.task('myCss', function(){   
     return gulp.src('path-to-your-font-lib/style.css')
         .pipe(gulp.dest('www/build/css'))    
});  
gulp.task('myFonts', function(){   
    return gulp.src('path-to-your-font-lib/fonts/**/*.+(eot|svg|ttf|woff)')
         .pipe(gulp.dest('www/build/fonts'))    
});
  • Измените задачу сборки и просмотра gulp следующим образом (добавление шрифта и css на смотреть и строить)
gulp.task('watch', ['clean'],  function(done){    
//existing ionic2 code 
} 
gulp.task('build', ['clean','myCss','myFonts'], function(done){   
//existing ionic2 code
}

Включить @import "../../node_modules/font-awesome/scss/font-awesome"; в файл app.core.scss

Чтобы включить значок в HTML

  <i primary class="fa fa-cart-plus fa-lg"></i>

Ответ 2

совместимость с шрифтами и ионной 2 только с конфигурационными файлами.

  • Скачать шрифт-awesome через npm (npm install font-awesome --save)

  • В файле package.json из вашего проекта добавьте следующее:

    "config": {
    "ionic_bundler": "webpack",
    "ionic_source_map": "source-map",
    "ionic_copy": "./config/copy.config.js",
    "ionic_sass": "./config/sass.config.js"
}

  • В корневой папке вашего проекта создайте папку конфигурации и скопируйте файлы copy.config.js и sass.config.js (эти файлы находятся в (..\node_modules\@ionic\app-scripts\config)

  • Измените скопированные файлы. В sass.config.js добавьте ссылку на font-awesome, в конце убедитесь, что у вас есть что-то вроде этого

    includePaths: [   node_modules/ионно- angular/темы ',   node_modules/ionicons/расстояние/СКС ',   node_modules/ионно- angular/шрифты ',   node_modules/FONT-устрашающий/СКС ' ],

Самая важная часть здесь - последняя строка.

в copy.config добавьте это:

copyFontAwesome:{
    src: 'node_modules/font-awesome/fonts/',
    dest: '{{WWW}}/fonts/'
}

Самая важная часть здесь - dest '{{WWW}}/fonts/', а не {{WWW}}/assets/fonts/', потому что font-awesome.css поиск шрифтов в файле "www/fonts".

  1. И, наконец, добавьте @import "font-awesome"; в variables.css (src\theme folder)

После выполнения всех этих шагов вы можете использовать font-awesome в своем проекте ionic 2.

<i class="fa fa-circle" style="color:#14afef; font-size: small"></i>

Все это

Ответ 3

Аналогичный подход, предложенный @Edward, но более чистым способом сделать это будет

1) npm install font-awesome --save

2) В package.json добавьте

"ionic_copy": "./config/copy.config.js", "ionic_sass": "./config/sass.config.js",

3) Создайте следующие файлы на корневом уровне вашего проекта и добавьте следующий контент.

В файле: ./config/copy.config.js Добавить

const copyConfig = require('../node_modules/@ionic/app-scripts/config/copy.config');
copyConfig.copyFonts.src.push('{{ROOT}}/node_modules/font-awesome/fonts/**/*');

В файле: ./config/sass.config.js Добавить

const sassConfig = require('../node_modules/@ionic/app-scripts/config/sass.config');

sassConfig.includePaths.push('node_modules/font-awesome/scss');

4) В ./src/theme/variables.scss

$fa-font-path: "../assets/fonts";
@import 'font-awesome';

Ответ 4

Я пробовал большинство ответов выше, но они были либо слишком сложными, либо были ограничены, когда ядро ​​Ionic2 было обновлено, поэтому вот мое решение:

Требуется ручная модернизация FA при выходе новой версии, но мне не нужно часто обновляться, поскольку я использую только несколько значков выбора.

Игнорируйте файлы SASS и скопируйте содержимое \ node_modules\font-awesome\fonts в\src\assets\fonts. Также скопируйте \node_modules\font-awesome\css\font-awesome.min.css в то же место.

Ссылка на csss в файле index.html следующим образом:

  <!--Custom Fonts-->
  <link href="assets/fonts/comfortaa/comfortaa.css" rel="stylesheet" />
  <link href="assets/fonts/gloriahallelujah/gloriahallelujah.css" rel="stylesheet" />
  <link href="assets/fonts/font-awesome.min.css" rel="stylesheet" />

Затем, чтобы использовать его, поместите это на страницу scss:

  .logo-text {
    font-family: 'comfortaa-bold';
  }

и это в html:

<h4 class="white-text slogan-text">Come bien a la mitad de precio</h4>

И это должно быть...

Ответ 5

По-прежнему существует большая путаница в том, что является лучшей практикой, когда дело доходит до добавления FontAwesome в приложение ionic2. Я написал учебник об этом, чтобы смягчить некоторые из этих путаниц. Надеюсь, это поможет кому-то еще найти эту информацию.

http://luiscabrera.site/tech/2017/01/09/fontawesome-in-ionic2.html

Ответ 6

Обновление для Ionic 2, Ionic 3+: всего один шаг:

Добавить шрифт-удивительную ссылку на ваш index.html

<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'; return false;" rel="stylesheet">