Как использовать fontawesome в ionic 2 rc0?

#ionic2

Вопрос:

Как использовать fontawesome in ionic 2 rc0 , поскольку нет gulp/grunt файла, чтобы я мог добавить файл в процесс сборки?

Ответ №1:

Вот статья, на которую я наткнулся во время поиска по этой же теме.

https://chriztalk.com/ionic-2-font-awesome-using-sass/

Вот суть:

Сделайте новый каталог конфигурации корневым для вашего проекта ionic 2:
```
 $ mkdir config
  
```
Найдите файлы copy.config.js и sass.config.js в этой папке: /node_modules/@ionic/app-scripts/config/ и скопируйте их в папку, которую вы только что создали.

Добавьте эти строки в новый copy.config.js config каталог in, который вы только что создали.

 ...
copyFontAwesomeCSS: {
  src: '{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css',
  dest: '{{WWW}}/assets/css/'
},
copyFontAwesome: {
  src: '{{ROOT}}/node_modules/font-awesome/fonts/**/*',
  dest: '{{WWW}}/fonts/'
},
...

Добавьте эти строки в includePaths[] блок sass.config.js файла в config только что созданном каталоге:
```
 ...
includePaths: [
  ...
  'node_modules/font-awesome/scss',
  ...
],
...
  
```
Добавьте блок конфигурации в свой package.json файл со следующими ссылками:
```
 ...
"config": {
  "ionic_copy": "./config/copy.config.js",
  "ionic_sass": "./config/sass.config.js"
},
....
  
```
Импортируйте шрифт-awesome в свой app.scss файл:
```
 ...
@import 'font-awesome';
...
  
```
Наконец, используйте шрифт awesome, как в любом HTML-файле:
```
 <h1><i class="fa fa-flag" aria-hidden="true"></i>amp;nbsp; Font Awesome</h1>
  
```

1. Мне не особенно нравится этот метод, поскольку, если основной сценарий копирования (/node_modules/@ionic/app-scripts/config/) изменится, вы не получите эти изменения в своем скрипте. Я бы предпочел исправить версию FA и скопировать ее вручную один раз из NodeModules в папку Assets и обновить ее вручную, когда захочу

Ответ №2:

Все еще существует много путаницы в том, что является наилучшей практикой, когда дело доходит до добавления FontAwesome в приложение ionic2, поэтому я написал статью об этом, чтобы смягчить некоторую путаницу. Я надеюсь, что это поможет кому-нибудь еще, кто ищет правильный ответ http://luiscabrera.site/tech/2017/01/09/fontawesome-in-ionic2.html

Ответ №3:

Просто добавьте ссылку cdn css на шрифт awesome в свой index.html

Или вы можете использовать @import of sass, чтобы добавить его в свой проект

 @import 'lib/fa.css'