5

How can I add and use font awesome in my new gulp-scss-bootstrap project? What is the clean and right way to do it? Thanks.

Anna
  • 2,911
  • 6
  • 29
  • 42

3 Answers3

17

1 download fontawesome 5

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

2 in a SCSS file

@import "../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@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";

3 in gulpfile.js add a task

gulp.task('icons', function() {
    return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
        .pipe(gulp.dest(dist+'/assets/webfonts/'));
});
Pieter De Clercq
  • 1,951
  • 1
  • 17
  • 29
Yifan
  • 1,185
  • 12
  • 18
  • 1
    Their docs which have a few additional details: https://fontawesome.com/how-to-use/on-the-web/using-with/sass and https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself You can for example set a `$fa-font-path` to change the location of the webfonts folder if needed, and use their mixins – KayakinKoder Aug 18 '19 at 00:43
  • Additionally, the first import of `fontawesome` is required. The imports that follow are for specific styles; new styles are added by the fontawesome team from time to time. I'm not sure how "required" the shims are – KayakinKoder Aug 18 '19 at 00:44
3

Install font awesome using NPM. You can add it to your package.json: 

  "devDependencies": {
    "bootstrap": "latest",
    "font-awesome": "latest",
etc

Then add a gulp task to copy the files from node_modules to a directory in your deployment: 

gulp.task('copy', function() {
    gulp.src([
            'node_modules/font-awesome/**',
            '!node_modules/font-awesome/**/*.map',
            '!node_modules/font-awesome/.npmignore',
            '!node_modules/font-awesome/*.txt',
            '!node_modules/font-awesome/*.md',
            '!node_modules/font-awesome/*.json'
        ])
        .pipe(gulp.dest('vendor/font-awesome'))
etc

Run gulp copy and it should set up the directory for you. Then you can import the font into your index.html

<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
zazzy78
  • 172
  • 7
  • You are suggesting an end-of-life version of FontAwesome. – connexo Mar 09 '18 at 13:54
  • I saw the version with @import font awsome in main scss. Is it a good practice too? – Anna Mar 09 '18 at 14:16
  • I think `link` in the HTML file is generally preferred over `import` in a CSS file, since the browser will download linked files in parallel for faster page loading. See [this](https://stackoverflow.com/questions/7199364/import-vs-link) answer. – zazzy78 Mar 09 '18 at 14:26
0

It is actually:

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

fort not font.

Better to link to directly, as the command may change

The link may also change, but you can always search it on fontawesome.com

WP Shala
  • 55
  • 6
  • It's better to not "just" link, as web pages move. It's okay if your command is version-specific. It's always better to give some context for the link, quote the relevant commands, and link to more information. https://stackoverflow.com/help/how-to-answer – Chris Romp Apr 17 '19 at 14:54