CODEWITHSUNDEEP
sassgulpbootstrap-4font-awesome
Anna
Anna

Reputation: 3131

Add font-awesome to gulp project correctly

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.

Upvotes: 5

Views: 11521

Answers (3)

Yifan
Yifan

Reputation: 1245

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/'));
});

Upvotes: 19

WP Shala
WP Shala

Reputation: 55

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

Upvotes: 0

zazzy78
zazzy78

Reputation: 172

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

Upvotes: 3

Related Questions