Angular 2 이상과 Angular CLI를 사용하고 있습니다.

프로젝트에 폰트를 추가하려면 어떻게해야합니까?

Angular 2.0 최종 릴리스 이후 에는 Angular2 CLI 프로젝트의 구조가 변경되었습니다. 시스템 파일은 필요 없으며 system.js는 없으며 웹팩 만 있습니다. 그래서 당신은 :

1. npm install font-awesome --save

2. 에서 angular-cli.json파일의 위치를 styles[]배열을 아래처럼 여기 글꼴 멋진 참조 디렉토리를 추가 :

   "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!?
         ],
         ...
     }
     ]
   ],
   

   최신 버전의 Angular에서는 angular.json대신 파일을 대신 사용 하십시오 ../. 예를 들어을 사용하십시오 "node_modules/font-awesome/css/font-awesome.css".

3. 원하는 html 파일에 멋진 글꼴 아이콘을 넣으십시오.

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

4. 응용 프로그램 중지 Ctrl+를 c사용하여 응용 프로그램을 실행하여 다시 다음 ng serve파수꾼이 변화를 관찰되지 src 폴더와 각-cli.json에만 때문이다.

5. 멋진 아이콘을 즐기십시오!

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인프라 를 혼동하지 마십시오 . ;)

가장 좋은 답변은 약간 구식이며 약간 더 쉬운 방법이 있습니다.

1. npm을 통해 설치

   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에 구성 요소를 업로드하고 구성 요소 scss에서 font-awesome을 가져 오는 경우 해당 지점에서 잘못된 상대 경로가 아닌 ~로 제대로 작동하기 때문입니다.

이 방법은 CSS가 포함 된 모든 npm 모듈에 적용됩니다. scss에서도 작동합니다. 그러나 CSS를 styles.scss로 가져 오는 경우 작동하지 않으며 아마도 그 반대도 가능합니다. 여기 왜

Angular Projects에서 Font-Awesome을 사용하는 데는 3 가지 부분이 있습니다

1. 설치
2. 스타일링 (CSS / SCSS)
3. 각도 사용법

설치

NPM에서 설치하고 패키지에 저장하십시오.

npm install --save font-awesome

CSS를 사용하는 경우 스타일링

style.css에 삽입

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

SCSS를 사용하는 경우 스타일링

스타일에 삽입하십시오.

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

일반 Angular 2.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>

업데이트 2020 년 2 월 :
fortawesome 패키지는 이제 지원 ng add하지만 각도 9에서만 사용할 수 있습니다 .

ng add @fortawesome/angular-fontawesome

2019 년 10 월 8 일 업데이트 :

새 패키지를 사용할 수 있습니다 https://www.npmjs.com/package/@fortawesome/angular-fontawesome

npm install @fortawesome/angular-fontawesome @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를 사용하는 경우 angular-cli.json 내부의 스타일에 글꼴이 멋진 CSS를 추가하십시오.

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

참고 : SCSS 전처리기를 사용하는 경우 scss의 CSS를 변경하십시오.

사용 예 :

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

옵토 인 2 :

가 공식 이야기그것에 가 있습니다

멋진 글꼴 라이브러리를 설치하고 종속성을 추가하십시오. 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';

테스트

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 는 기본적으로 angular cli가 글꼴을 루트 로 출력하는 것처럼 dist root 를 글꼴로 멋진 글꼴 파일 로 출력합니다 dist. 전혀 문제가되지 않습니다.

와 Angular2RC5 및angular-cli 1.0.0-beta.11-webpack.8 당신은 CSS를 수입하여이 작업을 수행 할 수 있습니다.

멋진 글꼴을 설치하십시오.

npm install font-awesome --save

구성된 스타일 파일 중 하나에서 멋진 글꼴을 가져옵니다.

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

(스타일 파일은에 구성되어 있습니다 angular-cli.json)

font-awesome이 이제 설명서에 따라 다르게 설치되어 있기 때문에 해상도를 낮추겠다고 생각했습니다.

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

왜 그것이 끔찍한 지 이제 나에게서 탈출하지만 오래된 글꼴로 돌아 가지 않고 최신 버전을 고수 할 것이라고 생각했습니다.

그런 다음 scss로 가져 왔습니다.

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

도움이 되었기를 바랍니다

위의 많은 지침이 효과가 있습니다. 그러나 주목할 점은 다음과 같습니다.

사용 <i class="fas fa-coffee"></i> 하지 않았다설치 후 내 프로젝트 (일주일 전의 새 실습 프로젝트)에서 여기의 샘플 아이콘도 지난 주 내에 Font Awesome의 클립 보드로 복사되었습니다.

이 <i class="fa fa-coffee"></i> 작동합니다 . 프로젝트에 Font Awesome을 설치 한 후에도 작동하지 않으면 아이콘의 클래스를 확인하여 's'를 제거하여 작동하는지 확인하는 것이 좋습니다.

여기에는 많은 좋은 답변이 있습니다. 그러나 그들 모두를 시도했지만 여전히 멋진 아이콘 대신 사각형을 얻는다면 CSS 규칙을 확인하십시오. 제 경우에는 다음과 같은 규칙이있었습니다.

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

그리고 fontawesome 글꼴보다 우선합니다. *선택기를 교체 body하여 내 문제 를 해결했습니다.

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

각도 6의 경우

먼저 npm install font-awesome --save

추가 node_modules/font-awesome/css/font-awesome.css로 angular.json .

기억 하지 의 앞에 어떤 점을 추가합니다 node_modules/.

이 게시물에서는 Fontawesome 5 를 Angular 6 에 통합하는 방법에 대해 설명합니다 (Angular 5 및 이전 버전도 작동하지만 글을 조정해야 함)

옵션 1 : css- 파일 추가

프로 : 모든 아이콘이 포함됩니다

대조 : 모든 아이콘이 포함됩니다 (모든 글꼴이 포함되므로 더 큰 앱 크기)

다음 패키지를 추가하십시오.

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 : 각도 패키지

프로 : 더 작은 앱 크기

대비 : 별도로 사용하려는 모든 아이콘을 포함해야합니다.

FontAwesome 5 Angular 패키지를 사용하십시오 :

npm install @fortawesome/angular-fontawesome

아이콘을 추가하려면 설명서를 따르십시오. 그들은 svg-icon을 사용하므로 svgs / icons 만 추가하면됩니다. 실제로 사용합니다.

몇 가지 실험을 한 후 다음 작업을 수행했습니다.

1. npm으로 설치하십시오.

   npm install font-awesome --save
   

2. angular-cli-build.js 파일에 추가 하십시오 :

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

3. index.html에 추가

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

핵심은 angular-cli-build.js 파일에 글꼴 파일 유형을 포함시키는 것이 었습니다

. + (css | css.map | otf | eot | svg | ttf | woff | woff2)

허용되는 답변이 오래되었습니다.

각도 9 및 Fontawesome 5

1. FontAwesome 설치

   npm install @ fortawesome / fontawesome-free-저장

2. angular.json에 스타일로 등록하십시오.

   "node_modules/@fortawesome/fontawesome-free/css/all.min.css"

3. 응용 프로그램에서 사용하십시오

편집 : 각도 ^ 4.0.0 및 전자 ^ 1.4.3을 사용하고 있습니다.

문제가있는 경우 ElectronJS 또는 이와 유사한 가 있고 일종의 404 오류가있는 경우 가능한 해결 방법은을 webpack.config.js추가하여 (npm 또는 package.json 파일에 글꼴 멋진 노드 모듈이 설치되어 있다고 가정하여) :

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

내가 사용하는 웹팩 구성에는 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이 fonts 폴더를 dev assets 폴더에 복사하고 있습니다.
• Webpack이 개발 자산 폴더를 dist 자산 폴더

이제 빌드 프로세스가 완료되면 응용 프로그램에서 .scss 파일과 아이콘이 포함 된 폴더를 찾아서 올바르게 해결해야합니다. 이를 해결하기 위해 웹팩 구성에서 이것을 사용했습니다.

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

마지막으로 .scss 파일에서 font-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.

이것은 매우 까다 롭지 만 Electron.js에서 404 오류 문제를 해결하는 유일한 방법입니다.

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]'
}

AngularCLI 6.0.3 및 Material Design과 함께 작동하는 FontAwesome 5.2.0의 최신 버전을 얻으려고 몇 시간을 낭비했습니다. FontAwesome 웹 사이트에서 npm 설치 지침을 따랐습니다.

최신 문서는 다음을 사용하여 설치하도록 지시합니다.

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>

Font Awesome 은 scalable크기, 색상, 그림자 및의 기능으로 즉시 커스터마이즈 할 수있는 벡터 아이콘을 제공합니다 CSS.

새 프로젝트를 작성하고 프로젝트를 탐색하십시오.

ng new navaApp
cd navaApp

멋진 글꼴 라이브러리를 설치하고에 종속성을 추가하십시오 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';

Angular Font Awesome 패키지를 사용할 수 있습니다

npm install-글꼴 멋진 각도 글꼴 멋진 저장

그런 다음 모듈에서 가져옵니다.

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

다음과 같이 사용하십시오.

<i class="fa fa-coffee"></i>

Angular 프로젝트에서 Font Awesome 5를 사용하려면 아래 코드를 src / index.html 파일에 삽입하십시오.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

행운을 빕니다!

fontawesome 5.x +의 경우 가장 간단한 방법은 다음과 같습니다.

npm 패키지를 사용하여 설치하십시오. npm install --save @fortawesome/fontawesome-free

당신에 styles.scss파일을 포함한다 :

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';

참고 : _variables.scss파일 이 있으면 파일이 $fa-font-path아닌 내부 를 포함하는 것이 더 적절 styles.scss합니다.

LSS (SCSS 아님)와 Angular 2.4.0 및 표준 Webpack (Angular CLI 아님)을 사용하면 다음과 같은 효과가있었습니다.

npm install --save font-awesome

(내 app.component.less에서) :

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

물론이 명확하고 매우 직관적 인 스 니펫 (webpack.conf의 module.loaders)이 필요할 수 있습니다.

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

로더는 종류의 웹팩 오류를 수정하기 위해 존재합니다

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

정규 표현식은 해당 svg-references (버전 사양이 있거나없는)와 일치합니다. 웹팩 설정에 따라 필요하지 않거나 다른 것이 필요할 수 있습니다.

package.json에 "devDependencies"font-awesome : "version number"로 추가하십시오

구성한 명령 프롬프트 유형 npm 명령으로 이동하십시오.

Font Awesome 5+를 사용하고 싶었고 대부분의 답변은 이전 버전에 중점을 둡니다.

새로운 Font Awesome 5+의 경우 앵귤러 프로젝트가 아직 출시되지 않았으므로 멋진 웹 사이트 atm에 언급 된 예제를 사용하려면 해결 방법이 필요합니다. (특히 fa 클래스 대신 fas, far 클래스)

방금 styles.css에서 cdn을 Font Awesome 5로 가져 왔습니다. 누군가가 내가했던 것보다 빨리 답변을 찾는 데 도움이되는 경우를 대비하여 이것을 추가했습니다 :-)

Style.css의 코드

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

어떤 이유로 든 패키지 throw npm을 설치할 수 없습니다. 언제든지 index.html을 편집하고 멋진 CSS를 머리에 추가 할 수 있습니다. 그런 다음 프로젝트에서 사용했습니다.

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]

다음을 사용하는 Angular 9의 경우 ng:

ng add @fortawesome/angular-fontawesome@0.6.x

자세한 내용은 여기를 참조하십시오

이제 Angular CLI에 fontAwesome을 설치하는 몇 가지 방법이 있습니다.

ng add @fortawesome/angular-fontawesome

OR using yarn

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/angular-fontawesome

OR Using NPM

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

여기를 참조하십시오 : https://github.com/FortAwesome/angular-fontawesome