2

I am attempting to move some of my fonts over through my resources/assets/fonts/web-icons/ directory over so that when I use them in my layouts it will show the correct icons. Can someone help me understand when I run this for my gulp file it does not copy the web-icons over to the public folder which I'm trying to show as public/fonts/web-icons.

var elixir = require('laravel-elixir');

elixir(function (mix) {

    /**
     * Copy needed files from Remark directories
     * to /public directory.
     */
    mix.copy('fonts/web-icons', 'public/fonts');

    mix.styles([
        'libs/bootstrap.css',
        'libs/bootstrap-extend.css',
        'libs/animsition.css',
        'libs/asScrollable.css',
        'libs/switchery.css',
        'libs/slidePanel.css',
        'libs/flag-icon.css',
        'site.min.css'
    ]);
});
user3732216
  • 1,579
  • 8
  • 29
  • 54

1 Answers1

5

According to the Elixir documentation:

The copy method may be used to copy files and directories to new locations. All operations are relative to the project's root directory

If your fonts are stored in your resources directory, you should specify that full path as the first argument:

mix.copy('resources/assets/fonts/web-icons', 'public/fonts/web-icons');
Aken Roberts
  • 13,012
  • 3
  • 34
  • 40
  • That's great. however what if I have more than one directories of fonts like a font awesome directory as well. I'm assuming I would copy those over too just the same way. Is that correct? Also would I just make two calls two each file in my layout file for the icons or is it possible with Elixir to group all fonts together in one file or can I even put those into an additional file with all my other css? – user3732216 Feb 09 '16 at 19:49
  • Yes, you should be able to copy multiple files over to the same directory if you want. Just make multiple `mix.copy()` calls. Font files are not designed to be combined into a single file. You'll have to reference them individually in your CSS file(s) as you normally would. – Aken Roberts Feb 09 '16 at 19:59
  • What do you mean by that second part? How would I work that into Elixir? – user3732216 Feb 09 '16 at 20:02
  • Using custom font files requires two steps: 1) adding the font files to your website (which you are doing by copying them from resources/ to public/), and 2) adding the custom fonts to your CSS via [`@font-face`](http://stackoverflow.com/questions/12144000/using-custom-fonts-using-css). The latter you do not need Elixir for. – Aken Roberts Feb 09 '16 at 20:23
  • Use @font-face even when the fonts have CSS files I was going to old? Or should I import the CSS files? – user3732216 Feb 09 '16 at 21:41
  • You can import the CSS files if your font package comes with them. Make sure to either move those to your public/ directory also, or compile them with your project's styles if you are using LESS/SASS. – Aken Roberts Feb 09 '16 at 22:02