Angular 2 + CLI 프로젝트에 폰트 어썸을 추가하는 방법

sourcecode

Angular 2 + CLI 프로젝트에 폰트 어썸을 추가하는 방법

copyscript 2023. 5. 29. 11:07

Angular 2 + CLI 프로젝트에 폰트 어썸을 추가하는 방법

Angular 2+와 Angular CLI를 사용하고 있습니다.

프로젝트에 폰트 어썸을 추가하려면 어떻게 해야 합니다.

Angular 2.0 최종 릴리스 이후 Angular2 CLI 프로젝트의 구조가 변경되었습니다. 공급업체 파일이나 system.js는 필요 없고 웹 팩만 필요합니다.그렇게 하면 됩니다.

npm install font-awesome --save

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 최버에서는전을 합니다.angular.json대신 하지 않고 파일을 합니다.../를 들어, 를들어, 용사를 합니다."node_modules/font-awesome/css/font-awesome.css".

원하는 html 파일에 글꼴이 멋진 아이콘을 배치합니다.

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

응용 프로그램을 중지하고 + 를 사용하여 응용 프로그램을 다시 실행합니다.ng serve감시자는 src 폴더에만 해당하고 angular-cli.json은 변경 사항에 대해 관찰되지 않기 때문입니다.
멋진 아이콘을 즐겨보세요!

SAS를 사용하는 경우 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사회 기반 시설.;)

상위 답변은 약간 구식이고 약간 더 쉬운 방법이 있습니다.

npm을 통해 설치

npm install font-awesome --save
의 신의에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";

사용~를 속을드러것낼셈으로 할 입니다.node_module상대 경로보다는 이런 식으로 하는 것이 좋습니다.그 이유는 npm에 구성 요소를 업로드하고 구성 요소 scss 내부에서 글꼴-어썸을 가져오면 해당 시점에서 잘못된 상대 경로가 아닌 ~에서 제대로 작동하기 때문입니다.

이 메서드는 CSS를 포함하는 모든 npm 모듈에 대해 작동합니다.scss에서도 작동합니다.그러나 css를 style.scss로 가져오면 작동하지 않습니다(그 반대일 수도 있습니다).이유는 여기에 있습니다.

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

설치
스타일링(CSS/SCSS)
각도에서의 사용

설치

NPM에서 설치하고 패키지에 저장합니다.제이손

npm install --save font-awesome

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

스타일에 삽입합니다.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>

각진 재료와 함께 사용

.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년: 2020년 2월:
Fortawome 패키지는 이제 지원되지만 각도 9 이상에서만 사용할 수 있습니다.

ng add @fortawesome/angular-fontawesome

업데이트 2019년 10월 8일:

새 패키지 https://www.npmjs.com/package/ @fortawesome/towesome을 사용할 수 있습니다.

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-aewomenpm 모듈을 사용할 수 있습니다.

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 내부의 스타일에 글꼴-awesome 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"
]

SAS 사용

파일 빈 파 만 들_variables.scsssrc/.

을 항음목에 합니다._variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts';styles.scss다음을 추가합니다.

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

시험

run serve를 실행하여 응용 프로그램을 개발 모드로 실행하고 http://localhost:4200으로 이동합니다.

하려면 Font Awesome을 합니다.src/app/app.component.html다음으로...

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

이 파일을 저장한 후 브라우저로 돌아가 앱 제목 옆에 있는 Font Awesome 아이콘을 확인합니다.

또한 관련 질문이 있습니다. Angular CLI는 기본적으로 글꼴을 출력하는 것처럼 글꼴-awesome 글꼴 파일을 distroot로 출력합니다.dist루트, 참고로 전혀 문제가 되지 않습니다.

승인된 답변이 오래되었습니다.

각진 9와 폰타우섬 5의 경우.

FontAwesome 설치

npm 설치 @fortawesome/fortawesome-free --저장
angular.json 언더스타일에 등록합니다.

"node_node/@fortawesome/fortawesome-free/min.min.sys"
응용프로그램에서 사용합니다.

폰트 어썸은 이제 그들의 문서에 따라 다르게 설치되었기 때문에 저는 이것에 대한 저의 결심을 제출할 것이라고 생각했습니다.

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

왜 그것이 멋진 사람들을 위한 것인지 이제는 이해가 가지 않지만 예전의 멋진 글꼴로 돌아가기보다는 최신 버전을 고수할 것이라고 생각했습니다.

그리고 나서 나는 그것을 내 sscs로 가져왔습니다.

$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";

이것이 도움이 되길 바랍니다.

와 함께Angular2 및 RC5 »angular-cli 1.0.0-beta.11-webpack.8CSS 가져오기를 통해 이를 달성할 수 있습니다.

글꼴만 설치하면 됩니다.

npm install font-awesome --save

그런 다음 구성된 스타일 파일 중 하나에서 글꼴 고정을 가져옵니다.

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

파일은 (에서 구성됩니다.)angular-cli.json)

작업 위의 많은 지시사항들, 저는 그것들을 보는 것을 제안합니다.그러나 주의할 점은 다음과 같습니다.

용사를 합니다. 설치 후 내 프로젝트(새 연습 프로젝트는 일주일밖에 안 됨)에서 작동하지 않았고 여기 샘플 아이콘도 지난 주 내에 Font Awesome에서 클립보드로 복사되었습니다.

이 이. 효과가 있습니다.프로젝트에 Font Awesome을 설치한 후 아직 작동하지 않는다면 아이콘의 클래스를 확인하여 's'를 제거하여 작동하는지 확인하는 것이 좋습니다.

폰타우섬 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▁the다▁를 포함하는 것이 더 .$fa-font-path안에 있는 것이 아니라 그 안에 있는 것styles.scssjava.

각도 6의 경우

첫째번▁firstnpm install font-awesome --save

더하다node_modules/font-awesome/css/font-awesome.css각을 지니다.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: Angular 패키지

찬성: 더 작은 앱 크기

반대: 별도로 사용할 모든 아이콘을 포함해야 합니다.

FontAwesome 5 Angular 패키지 사용:

npm install @fortawesome/angular-fontawesome

설명서에 따라 아이콘을 추가하면 됩니다.그들은 svg 아이콘을 사용하기 때문에 당신이 정말로 사용하는 svgs/아이콘만 추가하면 됩니다.

여기에 좋은 답이 많이 있습니다.하지만 만약 당신이 그것들을 모두 시도했지만 여전히 몇몇 멋진 아이콘 대신 정사각형을 얻고 있다면, 당신의 CSS 규칙을 확인하세요.제 경우에는 다음과 같은 규칙이 있었습니다.

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

그리고 그것은 몇몇 폰트들을 덮어씁니다. 체중교를 대체하는 것.*로 선택합니다.body문제를 했습니다.

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

몇 가지 실험 후에 저는 다음과 같은 작업을 할 수 있었습니다.

npm으로 설치:
```
npm install font-awesome --save
```

angular-cli-build.js 파일에 추가:

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

index.dll에 추가

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

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

.+(filename|map|otf|eot|tg|ttf|woff|woff2)

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

전자 제품에 문제가 있는 경우JS 또는 유사하고 일종의 404 오류가 있습니다. 가능한 해결 방법은 다음과 같습니다.webpack.config.js추가(및 npm을 통해 또는 패키지에 글꼴 고정 노드 모듈이 설치되어 있다고 가정함).json 파일):

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

제가 하고 있는 은 현재사중웹팩구같다다습니음과에성인용▁notesrc/app/dist에서, 력으로서멀, 고리서그리,assets폴더가 웹 팩에 의해 생성됩니다.

// 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'
},

그래서 기본적으로 현재 일어나고 있는 일은 다음과 같습니다.

웹 팩에서 글꼴 폴더를 개발 자산 폴더에 복사하는 중입니다.
를 웹팩개폴복중입니로 .dist 폴더

이제 빌드 프로세스가 완료되면 애플리케이션에서 다음을 검색해야 합니다..scss파일 및 아이콘이 들어 있는 폴더를 사용하여 아이콘을 올바르게 확인할 수 있습니다.이러한 문제를 해결하기 위해 웹 팩 구성에서 다음을 사용했습니다.

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

에서..scss파일, 폰트 어썸 .scss를 가져와서 폰트의 경로를 정의하는 중입니다. 다시 말해,dist/assets/font-awesome/fonts는 경는입니다.dist my 가 "webpack.config" 출력으로 되어 있기 입니다.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

몇 시간을 허비한 후에 나는 마침내 그것을 제거하고 다음 명령을 사용하여 font awesome 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>

폰트 어썸이 제공합니다.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"
],
 }
}

SAS 사용

SAS를 사용하여 새 프로젝트 생성:

ng new cli-app --style=scss

으로 기존 프로젝트와 함께 CSS:

이름 바꾸기src/styles.csssrc/styles.scssangular.json를 찾다styles.scss에 css:

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

변경해야 합니다.styles.cssstyles.scss.

파일 빈 파 만 들_variables.scsssrc/.

을 항음목에 합니다._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 --save font-scont-scannes angular-scannes-module

모듈로 가져오기:

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

다음과 같이 사용합니다.

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">

행운을 빕니다.

LESS(SCSS가 아님)와 Angular 2.4.0 및 표준 웹 팩(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)"

regexp는 버전 지정 여부와 상관없이 이러한 svg-차이와 일치합니다.웹 팩 설정에 따라 필요하지 않거나 다른 것이 필요할 수 있습니다.

패키지에 추가합니다.json as "devDependencies" 글꼴 awesome : "버전 번호"

구성한 명령 프롬프트 유형 npm 명령으로 이동합니다.

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

새로운 폰트 어썸 5+의 경우 각진 프로젝트가 아직 출시되지 않았기 때문에 폰트 어썸 웹사이트 atm에서 언급된 예제를 활용하려면 해결책을 사용해야 합니다.(특히 fa 클래스 대신 fa, far 클래스)

나는 방금 내 스타일의 폰트 어썸 5로 cdn을 가져왔습니다.누군가 나보다 더 빨리 답을 찾는 데 도움이 될 경우를 대비해 이것을 추가했습니다 :-)

Style.css의 코드

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

어떤 이유로 패키지를 설치할 수 없는 경우에는 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]

각도 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

각도 11에서

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

에 그음에다.app.module.ts imports array

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

  imports: [
    BrowserModule,
    FontAwesomeModule
  ],

에 그음에다.any.component.ts

turningGearIcon = faCogs;

그리고 나서.any.component.html

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

글꼴 awesome - 부트스트랩의 무료 버전을 사용하려면 다음을 사용합니다.

npm install --save @fortawesome/fontawesome-free

각 프로젝트를 빌드하는 경우 각.json에 다음 가져오기도 추가해야 합니다.

"styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/@fortawesome/fontawesome-free/js/all.js"
        ]

언급URL : https://stackoverflow.com/questions/38796541/how-to-add-font-awesome-to-angular-2-cli-project

'sourcecode' 카테고리의 다른 글

OrderBy와 OrderByDescending은 안정적입니까? (0)	2023.06.03
Node.js - 플랫폼에 구애받지 않는 방법으로 홈 디렉토리 찾기 (0)	2023.05.29
두 일반 목록의 차이점을 비교하는 가장 빠른 방법 (0)	2023.05.29
지정된 파일이 추가된 커밋을 찾는 방법은 무엇입니까? (0)	2023.05.29
파일 잠금을 확인하는 방법은 무엇입니까? (0)	2023.05.29

현재글Angular 2 + CLI 프로젝트에 폰트 어썸을 추가하는 방법

각종 프로그래밍 정보를 다루는 블로그입니다.

MySQL, Spring-Boot, vuex, Git, oracle, Java, reactjs, Powershell, mongoDB, php, vuejs2, WordPress, MariaDB, angularjs, Python, C, JSON, Ajax, JavaScript, jquery,

Today :
Yesterday :

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

copyscript

Angular 2 + CLI 프로젝트에 폰트 어썸을 추가하는 방법

Angular 2 + CLI 프로젝트에 폰트 어썸을 추가하는 방법

옵션 1:

옵션 2:

'sourcecode' 카테고리의 다른 글

'sourcecode'의 다른글

티스토리툴바

Angular 2 + CLI 프로젝트에 폰트 어썸을 추가하는 방법

Angular 2 + CLI 프로젝트에 폰트 어썸을 추가하는 방법

옵션 1:

옵션 2:

'sourcecode' 카테고리의 다른 글

'sourcecode'의 다른글

관련글

티스토리툴바