How to use font-awesome icons from node-modules

Question

I have installed font-awesome 4 0 3 icons using npm install   If I need to use it from node-modules how should I use it in html file   If I need to edit the less file do I need to edit it in node-modules

User · Answer

I came upon this question having a similar problem and thought I would share another solution:

If you are creating a Javascript application, font awesome icons can also be referenced directly through Javascript:

First, do the steps in this guide:

npm install @fortawesome/fontawesome-svg-core

Then inside your javascript:

import { library, icon } from '@fortawesome/fontawesome-svg-core'
import { faStroopwafel } from '@fortawesome/free-solid-svg-icons'

library.add(faStroopwafel)

const fontIcon= icon({ prefix: 'fas', iconName: 'stroopwafel' })

After the above steps, you can insert the icon inside an HTML node with:

htmlNode.appendChild(fontIcon.node[0]);

You can also access the HTML string representing the icon with:

fontIcon.html

User · Answer

You have to set the proper font path  e g   my-style scss   fa-font-path     node modules font-awesome fonts    import     node modules font-awesome scss font-awesome    icon-user      extend  fa     extend  fa-user

User · Answer

If you re using npm you could use Gulp js a build tool to build your Font Awesome packages from SCSS or LESS  This example will compile the code from SCSS    Install Gulp js  v4 locally and CLI V2 globally   Install a plugin called gulp-sass using npm  Create a main scss file in your public folder and use this code    fa-font-path      webfonts    import  fontawesome fontawesome    import  fontawesome brands    import  fontawesome regular    import  fontawesome solid    import  fontawesome v4-shims    Create a gulpfile js in your app directory and copy this   const   src  dest  series  parallel     require  gulp    const sass   require  gulp-sass    const fs   require  fs     function copyFontAwesomeSCSS        return src  node modules  fortawesome fontawesome-free scss   scss         pipe dest  public scss fontawesome        function copyFontAwesomeFonts        return src  node modules  fortawesome fontawesome-free webfonts           pipe dest  public dist webfonts          function compileSCSS         return src    public scss theme scss         pipe sass    pipe dest  public css             Series completes tasks sequentially and parallel completes them asynchronously  exports build   parallel     copyFontAwesomeFonts     series copyFontAwesomeSCSS  compileSCSS       Run  gulp build  in your command line and watch the magic

User · Answer

You will need to copy the files as part of your build process  For example  you can use a npm postinstall script to copy the files to the correct directory    postinstall    cp -R node modules font-awesome fonts   public     For some build tools  there are preexisting font-awesome packages  For example  webpack has font-awesome-webpack which lets you simple require  font-awesome-webpack

User · Answer

Install as npm install font-awesome --save-dev  In your development less file  you can either import the whole font awesome less using  import  node modules font-awesome less font-awesome less   or look in that file and import just the components that you need  I think this is the minimum for basic icons      adjust path as needed     fa path      node modules font-awesome less    import    fa path  variables less    import    fa path  mixins less    import    fa path  path less    import    fa path  core less    import    fa path  icons less     As a note  you still aren t going to save that many bytes by doing this  Either way  you re going to end up including between 2-3k lines of unminified CSS   You ll also need to serve the fonts themselves from a folder called fonts  in your public directory  You could just copy them there with a simple gulp task  for example    gulp task  fonts   function       return gulp src  node modules font-awesome fonts          pipe gulp dest  public fonts

User · Answer

In my style css file      You can add global styles to this file  and also import other style files      import url     node modules font-awesome css font-awesome min css

User · Answer

You could add it between your  lt head gt  lt  head gt  tag like so    lt head gt     lt link href    node modules font-awesome css font-awesome css  rel  stylesheet  type  text css  gt   lt  head gt    Or whatever your path to your node modules is   Edit  2017-06-26  - Disclaimer  THERE ARE BETTER ANSWERS  PLEASE DO NOT USE THIS METHOD  At the time of this original answer  good tools weren t as prevalent  With current build tools such as webpack or browserify  it probably doesn t make sense to use this answer  I can delete it  but I think it s important to highlight the various options one has and the possible dos and do nots

User · Answer

Using webpack and scss   Install font-awesome using npm  using the setup instructions on https   fontawesome com how-to-use   npm install  fortawesome fontawesome-free   Next  using the copy-webpack-plugin  copy the webfonts folder from node modules to your dist folder during your webpack build process   https   github com webpack-contrib copy-webpack-plugin   npm install copy-webpack-plugin   In webpack config js  configure copy-webpack-plugin  NOTE  The default webpack 4 dist folder is  dist   so we are copying the webfonts folder from node modules to the dist folder   const CopyWebpackPlugin   require  copy-webpack-plugin     module exports         plugins            new CopyWebpackPlugin                 from     node modules  fortawesome fontawesome-free webfonts   to     webfonts                        Lastly  in your main scss file  tell fontawesome where the webfonts folder has been copied to and import the SCSS files you want from node modules    fa-font-path    webfonts      destination folder in dist   Adapt the path to be relative to your main scss file  import     node modules  fortawesome fontawesome-free scss fontawesome      Include at least one of the below  depending on what icons you want    Adapt the path to be relative to your main scss file  import     node modules  fortawesome fontawesome-free scss brands    import     node modules  fortawesome fontawesome-free scss regular    import     node modules  fortawesome fontawesome-free scss solid     import     node modules  fortawesome fontawesome-free scss v4-shims      if you also want to use  fa v4   like   fa fa-address-book-o     and apply the following font-family to a desired region s  in your html document where you want to use the fontawesome icons   Example    body         font-family   Font Awesome 5 Free      if you use fa v5  regular solid           font-family   Font Awesome 5 Brands      if you use fa v5  brands

User · Answer

SASS modules version Soon  using  import in sass will be depreciated  SASS modules configuration works using  use instead   use  quot    node modules font-awesome scss font-awesome quot   with      fa-font-path   quot    icons quot       icon-user      extend  fa     extend  fa-user

User · Answer

With expressjs  public it   app use   stylesheets fontawesome   express static   dirname     node modules  fortawesome fontawesome-free        And you can see it at  yourdomain com stylesheets fontawesome css all min css

User · Answer

Since I m currently learning node js  I also encountered this problem  All I did was  first of all  install the font-awesome using npm  npm install font-awesome --save-dev   after that  I set a static folder for the css and fonts   app use   fa   express static   dirname     node modules font-awesome css     app use   fonts   express static   dirname     node modules font-awesome fonts       and in html    lt link href   fa font-awesome css  rel  stylesheet  type  text css  gt    and it works fine

[css] How to use font-awesome icons from node-modules

Examples related to css

Examples related to node.js

Examples related to less

Examples related to npm

Examples related to font-awesome