Как добавить шрифт-awesome в проект Angular 2 + CLI

Я использую Angular 2+ и Angular CLI.

Как добавить шрифт-awesome в мой проект?

ОТВЕТЫ

Ответ 1

После финальной версии Angular 2.0 структура CLI-проекта Angular2 была изменена - вам не нужны никакие файлы вендоров, ни system.js - только веб-пакет. Итак, вы делаете:

  1. npm install font-awesome --save

  2. В файле angular-cli.json найдите массив styles[] и добавьте каталог ссылок font-awesome здесь, как показано ниже:

    "apps": [
          {
             "root": "src",
             "outDir": "dist",
             ....
             "styles": [
                "styles.css",
                "../node_modules/bootstrap/dist/css/bootstrap.css",
                "../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!?
             ],
             ...
         }
       ]

],

  3. Поместите несколько значков шрифта в любой HTML файл, который вы хотите:

     <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>

  4. Остановите приложение Ctrl + c, затем перезапустите приложение, используя ng serve поскольку наблюдатели предназначены только для папки src, а angular-cli.json не наблюдается для изменений.

  5. Наслаждайтесь своими потрясающими иконками!

Ответ 2

Если вы используете SASS, вы можете просто установить его через npm

npm install font-awesome --save

и импортируйте его в /src/styles.scss с помощью:

$fa-font-path: "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome.scss";

Совет. По возможности избегайте использования инфраструктуры angular-cli.;)

Ответ 3

Верхний ответ немного устарел, и есть немного более простой способ.

  1. установить через нпм

    npm install font-awesome --save

  2. в вашем style.css:

    @import '~font-awesome/css/font-awesome.css';

    или в вашем style.scss:

    $fa-font-path: "~font-awesome/fonts"; @import '~font-awesome/scss/font-awesome';

    Редактировать: как отмечено в комментариях, строка для шрифтов должна быть изменена в более новых версиях на $fa-font-path: "../../../node_modules/font-awesome/fonts";

использование ~ заставит sass заглянуть в node_module. Лучше сделать это так, чем с относительным путем. Причина в том, что если вы загружаете компонент в npm и импортируете font-awesome внутри компонента scss, тогда он будет работать правильно с ~, а не с относительным путем, который будет неправильным в этой точке.

Этот метод работает для любого модуля npm, который содержит css. Это работает и для scss. Однако, если вы импортируете CSS в ваши styles.scss, он не будет работать (и, возможно, наоборот). Вот почему

Ответ 4

Использование Font-Awesome в Angular Projects состоит из 3 частей

  1. Монтаж
  2. Стилизация (CSS/SCSS)
  3. Использование в Angular

Монтаж

Установите из NPM и сохраните в свой package.json

npm install --save font-awesome

Стилизация При использовании CSS

Вставьте в свой style.css

@import '~font-awesome/css/font-awesome.css';

Стилизация При использовании SCSS

Вставьте в свой style.scss

$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

Использование с простым угловым 2. 4+ 4+

<i class="fa fa-area-chart"></i>

Использование с угловым материалом

В вашем app.module.ts измените конструктор, чтобы использовать MdIconRegistry

export class AppModule {
  constructor(matIconRegistry: MatIconRegistry) {
    matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
  }
}

и добавьте MatIconModule в ваш импорт @NgModule

@NgModule({
  imports: [
    MatIconModule,
    ....
  ],
  declarations: ....

}

Теперь в любом файле шаблона вы можете теперь сделать

<mat-icon fontSet="fontawesome" fontIcon="fa-area-chart"></mat-icon>

Ответ 5

С Angular2 RC5 и angular-cli 1.0.0-beta.11-webpack.8 вы можете добиться этого с помощью импорта css.

Просто установите шрифт awesome:

npm install font-awesome --save

а затем импортируйте font-awesome в один из ваших настроенных файлов стиля:

@import '../node_modules/font-awesome/css/font-awesome.css';

(файлы стиля настроены в angular-cli.json)

Ответ 6

ОБНОВЛЕНИЕ 8 октября 2019 г.:

Вы можете использовать новый пакет https://www.npmjs.com/package/@fortawesome/angular-fontawesome

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

Добавить FontAwesomeModule к импорту в src/app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Свяжите значок со свойством в вашем компоненте src/app/app.component.ts:

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  faCoffee = faCoffee;
}

Используйте значок в шаблоне src/app/app.component.html:

<fa-icon [icon]="faCoffee"></fa-icon>

ОРИГИНАЛЬНЫЙ ОТВЕТ:

Вариант 1:

Вы можете использовать angular-font-awesome модуль npm

npm install --save font-awesome angular-font-awesome

Импортировать модуль:

...
//
import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
  //...
  imports: [
    //...
    AngularFontAwesomeModule
  ],
  //...
})
export class AppModule { }

Если вы используете Angular CLI, добавьте потрясающий шрифт CSS к стилям внутри angular-cli.json

"styles": [
    "styles.css",
    "../node_modules/font-awesome/css/font-awesome.css"
],

ПРИМЕЧАНИЕ. Если вы используете препроцессор SCSS, просто измените css на scss

Пример использования:

<fa name="cog" animation="spin"></fa>

Optoin 2:

Для этого есть официальная история for that now

Установите библиотеку font-awesome и добавьте зависимость в package.json

npm install --save font-awesome

Использование CSS

Чтобы добавить значки Font Awesome CSS в ваше приложение...

// in .angular-cli.json

"styles": [
  "styles.css",
  "../node_modules/font-awesome/css/font-awesome.css"
]

Использование SASS

Создайте пустой файл _variables.scss в src/.

Добавьте следующее к _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts'; В styles.scss добавьте следующее:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

Test

Запустите ng serve, чтобы запустить приложение в режиме разработки, и перейдите к http://localhost:4200.

Чтобы убедиться, что Font Awesome настроен правильно, измените src/app/app.component.html на следующее...

<h1>
  {{title}} <i class="fa fa-check"></i>
</h1>

После сохранения этого файла вернитесь в браузер, чтобы увидеть значок Font Awesome рядом с названием приложения.

Также есть связанный вопрос Angular CLI выводит файлы font-awesome шрифтов dist root, так как по умолчанию angular cli выводит шрифты в корень dist, что, кстати, совсем не проблема ,

Ответ 7

Думал, что я добавлю свое разрешение на это, так как font-awesome теперь устанавливается по-разному в соответствии с их документацией.

npm install --save-dev @fortawesome/fontawesome-free

Почему это ужасно, теперь ускользает от меня, но я подумал, что я останусь с самой последней версией, а не вернусь к старому удивительному шрифту.

Затем я импортировал его в мой scss

$fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "[email protected]/fontawesome-free/scss/fontawesome";
@import "[email protected]/fontawesome-free/scss/brands";
@import "[email protected]/fontawesome-free/scss/regular";
@import "[email protected]/fontawesome-free/scss/solid";
@import "[email protected]/fontawesome-free/scss/v4-shims";

Надеюсь это поможет

Ответ 8

После некоторых экспериментов мне удалось получить следующее:

  • Установить с npm:

    npm install font-awesome --save

  • добавить в angular -cli-build.js файл:

    vendorNpmFiles : [
    font-awesome/**/*.+(css|css.map|otf|eot|svg|ttf|woff|woff2)',
]

  • добавить в index.html

    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">

Ключ должен был включать типы файлов шрифтов в файл angular -cli-build.js

+. (CSS | css.map | OTF | СРВ | SVG | TTF | Уофф | woff2)

Ответ 9

Для угловых 6,

Первая npm install font-awesome --save

Добавьте node_modules/font-awesome/css/font-awesome.css в angular.json.

Не забудьте не добавлять никаких точек перед node_modules/.

Ответ 10

Многие инструкции выше работают, я предлагаю посмотреть на них. Однако кое-что стоит отметить:

Использование <i class="fas fa-coffee"></i> не работало в моем проекте (новый учебный проект всего недельной давности) после установки, а значок примера здесь также был скопирован в буфер обмена из Font Awesome в прошлом неделю.

Это <i class="fa fa-coffee"></i> действительно работает. Если после установки Font Awesome в вашем проекте он еще не работает, я предлагаю проверить класс на вашем значке, чтобы удалить "s", чтобы увидеть, работает ли он тогда.

Ответ 11

Здесь есть много хороших ответов. Но если вы попробовали все из них и по-прежнему получали квадраты вместо значков, похожих на шрифт, проверьте свои правила css. В моем случае у меня было следующее правило:

* {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}

И он переопределяет шрифты шрифтов. Просто замена селектора * на body решила мою проблему:

body {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}

Ответ 12

В этом посте описывается, как интегрировать Fontawesome 5 в Angular 6 (Angular 5 и предыдущие версии также будут работать, но тогда вам придется скорректировать мои записи)

Вариант 1: Добавить CSS файлы

Pro: каждый значок будет включен

Против: каждый значок будет включен (больший размер приложения, потому что включены все шрифты)

Добавьте следующий пакет:

npm install @fortawesome/fontawesome-free-webfonts

Затем добавьте следующие строки в ваш angular.json:

"app": {
....
"styles": [
....
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"
],
...    
}

Вариант 2: угловой пакет

Pro: меньший размер приложения

Против: Вы должны включить каждый значок, который вы хотите использовать отдельно

Используйте пакет FontAwesome 5 Angular:

npm install @fortawesome/angular-fontawesome

Просто следуйте их документации, чтобы добавить значки. Они используют svg-icons, поэтому вам нужно только добавить svgs/icons, которые вы действительно используете.

Ответ 13

Font Awesome предоставляет вам scalable векторные иконки, которые можно мгновенно настроить: размер, цвет, тень и все, что можно сделать с помощью CSS.

Создайте новый проект и перейдите в проект.

ng new navaApp
cd navaApp

Установите библиотеку font-awesome и добавьте зависимость в package.json.

npm install --save font-awesome

Использование CSS

Чтобы добавить значки Font Awesome CSS в ваше приложение...

// in angular.json
"build": {
"options": {
"styles": [
  "../node_modules/font-awesome/css/font-awesome.css",
  "src/styles.css"
],
 }
}

Использование SASS

Создать новый проект с помощью SASS:

ng new cli-app --style=scss

Для использования с существующим проектом с CSS:

Переименуйте src/styles.css в src/styles.scss Измените angular.json, чтобы искать styles.scss вместо css:

// in angular.json
"build": {
"options": {
"styles": [
  "src/styles.scss"
],
}
}

Обязательно измените styles.css на styles.scss.

Создайте пустой файл _variables.scss в src/.

Добавьте следующее к _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts';

В styles.scss добавьте следующее:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

Ответ 14

Изменить: я использую angular ^ 4.0.0 и Electron ^ 1.4.3

Если у вас есть проблемы с ElectronJS или похожими, и у вас есть ошибка 404, возможно, это обходное решение для uedit вашего webpack.config.js, добавив (и предположив, что у вас есть шрифт-awesome node, установленный через npm или в файле package.json):

new CopyWebpackPlugin([
     { from: 'node_modules/font-awesome/fonts', to: 'assets' },
     { from: 'src/assets', to: 'assets' }
]),

Обратите внимание, что конфигурация webpack, которую я использую, имеет src/app/dist как вывод, а в dist создается папка assets с помощью webpack:

// our angular app
entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/app/app',
},

// Config for our build files
output: {
    path: helpers.root('src/app/dist'),
    filename: '[name].js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'
},

Итак, в основном, что происходит в данный момент:

  • Webpack копирует папку шрифтов в папку ресурсов dev.
  • Webpack копирует папку ресурсов dev в папку dist assets

Теперь, когда процесс сборки будет завершен, приложению потребуется искать файл .scss и папку, содержащую значки, и разрешать их правильно. Чтобы решить их, я использовал это в моей конфигурации webpack:

// support for fonts
{
    test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
    loader: 'file-loader?name=dist/[name]-[hash].[ext]'
},

Наконец, в файле .scss я импортирую шрифт-awesome.scss и определяю путь к шрифтам, что опять-таки, dist/assets/font-awesome/fonts. Путь dist, потому что в моем webpack.config путь output.path устанавливается как helpers.root('src/app/dist');

Итак, в app.scss:

$fa-font-path: "dist/assets/font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";

Обратите внимание, что таким образом он определит путь шрифта (используется позже в файле .scss) и импортирует файл .scss с помощью ~font-awesome, чтобы разрешить путь, отличный от шрифтов, в node_modules.

Это довольно сложно, но это единственный способ найти проблему с ошибкой 404 с помощью Electron.js

Ответ 15

Начиная с https://github.com/AngularClass/angular-starter, после тестирования множества различных конфигурационных комбинаций, вот что я сделал, чтобы заставить его работать с AoT.

Как уже говорилось много раз, в моем app.component.scss:

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome";

Затем в webpack.config.js(на самом деле webpack.commong.js в стартовом пакете):

В разделе плагинов:

new CopyWebpackPlugin([
    { from: 'src/assets', to: 'assets' },
    { from: 'src/meta'},
    { from: 'node_modules/font-awesome/fonts', to: 'assets/fonts/' }
]),

В разделе правил:

,
{
    test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
    use: 'file-loader?name=/assets/fonts/[name].[ext]'
}

Ответ 16

Я потратил несколько часов, пытаясь заставить последнюю версию FontAwesome 5.2.0 работать с AngularCLI 6.0.3 и Material Design. Я следовал инструкциям по установке npm с сайта FontAwesome

Их последние документы проинструктируют вас выполнить установку, используя следующее:

npm install @fortawesome/fontawesome-free

Потратив несколько часов, я, наконец, удалил его и установил потрясающий шрифт, используя следующую команду (это устанавливает FontAwesome v4.7.0):

npm install font-awesome --save

Теперь он работает нормально, используя:

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome.scss";
<mat-icon fontSet="fontawesome" fontIcon="fa-android"></mat-icon>

Ответ 17

Используя LESS (не SCSS) и Angular 2.4.0 и стандартный Webpack (не Angular CLI, для меня работало следующее:

npm install --save font-awesome

и (в моем приложении app.component.less):

@import "~font-awesome/less/font-awesome.less";

и, конечно, вам может понадобиться этот очевидный и очень интуитивный сниппет (в модуле .loaders в webpack.conf)

        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
            loader: 'file?name=graphics/[name].[ext]'
        },

Загрузчик там, чтобы исправить ошибки webpack вида

"Module parse failed: \node_modules\font-awesome\fonts\fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)"

а regexp соответствует этим svg-ссылкам (с или без спецификации спецификации). В зависимости от настройки вашего веб-пакета вам может и не понадобиться, или вам может понадобиться что-то еще.

Ответ 18

Для webpack2 используйте:

{
 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
                    loader: "file-loader"
}

вместо file-loader?name=/assets/fonts/[name].[ext]

Ответ 19

Добавьте его в ваш package.json как "devDependencies" font-awesome: "номер версии"

Перейти к командной строке введите команду npm, которую вы настроили.

Ответ 20

Я хотел использовать Font Awesome 5+, и большинство ответов сосредоточено на старых версиях

Для нового Font Awesome 5+ угловой проект еще не выпущен, поэтому, если вы хотите использовать примеры, упомянутые на веб-сайте font-awesome atm, вам нужно обойти это. (особенно классы fast, far вместо класса fa)

Я только что импортировал cdn в Font Awesome 5 в моем файле styles.css. Просто добавьте это на случай, если кто-то поможет найти ответ быстрее, чем я :-)

Код в Style.css

@import "https://use.fontawesome.com/releases/v5.0.7/css/all.css";

Ответ 21

Если по какой-то причине вы не можете установить пакет, бросьте npm. Вы всегда можете отредактировать index.html и добавить потрясающий CSS в голову. А потом просто использовал его в проекте.

Ответ 22

Вы можете использовать пакет Angular Font Awesome

npm install --save font-awesome angular-font-awesome

и затем импортируйте в ваш модуль:

import { AngularFontAwesomeModule } from 'angular-font-awesome';
     @NgModule({
       //...
      imports: [
        //...
        AngularFontAwesomeModule
      ],
      //...
    })
    export class AppModule { }

и импортируем стиль в файл angular-cli:

   "styles": [
        "styles.css",
        "../node_modules/font-awesome/css/font-awesome.css"
    ],

см. более подробную информацию о пакете в библиотеке npm:

https://www.npmjs.com/package/angular-font-awesome

Ответ 23

Прекрасный пакет шрифтов на NPM не обновлялся с 2016 года.

Моя проблема заключалась в том, что я использовал значок, который был добавлен в более позднюю версию font-awesome.