# Including FontAwesome webfonts from node\_modules

**URL:** <https://talk.jekyllrb.com/t/including-fontawesome-webfonts-from-node-modules/4486>\
**Category:** Uncategorized\
**Created:** [May 28, 2020, 6:52pm UTC](https://talk.jekyllrb.com/t/including-fontawesome-webfonts-from-node-modules/4486 "2020-05-28T18:52:57Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![marceloverdijk](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/marceloverdijk/32/2546_2.png) [@marceloverdijk](https://talk.jekyllrb.com/u/marceloverdijk)\
**Post date:** [May 28, 2020, 6:52pm UTC](https://talk.jekyllrb.com/t/including-fontawesome-webfonts-from-node-modules/4486/1 "2020-05-28T18:52:57Z")

</div>

I’m maintaining some dependencies and its versions using npm.  
E.g. Bootstrap and FontAwesome. I cannot use a CDN for these as I’m changing some sass variables.

Now in my main scss file I can include sass files from `node_modules` folder like:

```
@import "../node_modules/bootstrap/scss/bootstrap";
@import "../node_modules/@fortawesome/fontawesome-pro/scss/fontawesome";

```

But e.g. FontAwesome also needs the webfonts folder relative to the css folder.

So I’m trying to “mount” `node_modules/@fortawesome/fontawesome-pro/webfonts` to `assets/webfonts`.  
I’m calling it “mounts” as GoHugo has something like that: [https://gohugo.io/commands/hugo\_config\_mounts/](https://gohugo.io/commands/hugo_config_mounts/)

With GoHugo I would configure it like:

```auto
module:
  mounts:
    - source: node_modules/@fortawesome/fontawesome-pro/webfonts
      target: assets/webfonts

```

Now I don’t think Jekyll has something like that, but I wonder if there is another option to do this?  
Of course I don’t want to expose the `node_modules` folder itself.

I also tried with a custom `CopyAssets` generator like:

```auto
require "fileutils"

module Jekyll
  class CopyAssets < Jekyll::Generator
    safe true
    priority :lowest

    def generate(site)
      assets = {
        "node_modules/@fortawesome/fontawesome-pro/webfonts": "webfonts"
      }
      assets.each { |src, dest|
        src = "#{site.source}/#{src}"
        dest = "#{site.dest}/assets/#{dest}"
        FileUtils.mkdir_p dest, :verbose => true
        FileUtils.cp_r src, dest, :verbose => true
      }
    end
  end
end

```

but that doesn’t work, the folders are copies but then in the Jekyll build process deleted again.

---

<div class="post-metadata">

**Author:** ![marceloverdijk](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/marceloverdijk/32/2546_2.png) [@marceloverdijk](https://talk.jekyllrb.com/u/marceloverdijk)\
**Post date:** [May 30, 2020, 8:12pm UTC](https://talk.jekyllrb.com/t/including-fontawesome-webfonts-from-node-modules/4486/2 "2020-05-30T20:12:57Z")

</div>

I should not have used a `Generator` for this but a `Hook` instead.

`_plugins/copy_to_dest.rb:`

```auto
require "fileutils"

Jekyll::Hooks.register :site, :post_write do |site|
  site.config["copy_to_dest"].each { |copy|
    Jekyll.logger.info "Copying:", "#{copy["source"]} to #{copy["target"]}"
    src = "#{site.source}/#{copy["source"]}"
    dest = "#{site.dest}/#{copy["target"]}"
    FileUtils.mkdir_p dest
    FileUtils.cp_r src, dest
  }
end

```

`_config.yml:`

```auto
copy_to_dest:
  - source: node_modules/@fortawesome/fontawesome-pro/webfonts/.
    target: assets/webfonts/
  - source: node_modules/flag-icon-css/flags/.
    target: assets/flags/

```

This copies the needed files from `node_modules` to the `_site/assets` folder when building the site.