发表新帖
发表新帖

Install Font Awesome 5 with NPM

后端 未结
关注
5 506
-上瘾入骨i
-上瘾入骨i 2021-02-03 19:21

I am working with Angular(6) application, and I am trying to use FA icons, and drop-down with no luck. I am successfully using FA(4) icons, like:
相关标签:
5条回答
  • 野性不改
    2021-02-03 20:04

    For Font Awesome 4.7.0:

    It should work by simply doing:

    npm install font-awesome --save

    And adding:

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

    ...to your styles.css or styles.scss.

    For Font Awesome 5 use the official Font Awesome 5 angular component

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

    In your template:

    <div style="text-align:center">
  <fa-icon [icon]="faAlignJustify"></fa-icon>
</div>

    In your typescript:

    import { faAlignJustify } from '@fortawesome/free-solid-svg-icons';

export class MyComponent {
  faAlignJustify = faAlignJustify;
}

    In the module of your component:

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

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    BrowserModule,
    FontAwesomeModule
  ]
})
export class MyModule { }
    0 讨论(0)
  • 梦如初夏
    2021-02-03 20:05

    For version 5, you need following package @fortawesome/fontawesome. See installation using package managers.

    Using npm:

    npm install --save @fortawesome/fontawesome-free

    Then reference either the all.css or all.js in the <head>.

    <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css">

    Note: Make sure the path is right, depends on where you installed the package from.

    OR you can import the module in your js code.

    import '@fortawesome/fontawesome-free/js/all.js';

    OR if you are using Sass, you can import the module in app.scss.

    @import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/<type>';

    Note: Replace <type> with solid, brands or regular whatever type of icons you need.

    Font Awesome has an official Angular component.

    npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-<type>-svg-icons
npm install --save @fortawesome/angular-fontawesome

    Note: Replace <type> with solid, brands or regular whatever type of icons you need.

    You can also install Vue and React components.

    npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/react-fontawesome
    0 讨论(0)
  • 被撕碎了的回忆
    2021-02-03 20:10

    A stumbling block for me was the final part of their installation docs. It says to reference the all.css file in your head tag.

    I did it incorrectly.

    The right way to link to this is the following:

    <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-pro/css/all.css">

    Hope this helps!

    This should get it working for you. Also, I would recommend reinstalling the latest version of the npm package using the FontAwesome guide

    0 讨论(0)
  • 再見小時候
    2021-02-03 20:12

    Alternatively, you can install fontawesome as a module in your js code.

    Steps:

    1. npm install @fortawesome/fontawesome-free --save
    2. in your javascript code import the all.js file as instructed at the very bottom of the instructions here.
    import '@fortawesome/fontawesome-free/js/all.js';

    - or -

    require('@fortawesome/fontawesome-free/js/all.js');
    0 讨论(0)
  • 清酒与你
    2021-02-03 20:17

    If you are using npm install --save @fortawesome/fontawesome-free change the package.json to refer 

    import "@fortawesome/fontawesome-free/css/all.css";
    0 讨论(0)
 看不清?
提交回复
热议问题