I'm totally new to Yeoman and I'm facing an issue with it after setting up my project I decided that I want to use font-awesome so I installed it using bower and it works fine
the issue is that font-awesome is not in the dist/bower_components folder but when I reference the css file of font-awesome in the html page like this
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
it works in the localhost but still no files in dist/bower_components except for requirejs
so how can I tell grunt to copy font-awesome's files to the dist/bower_components folder ?
Also consider using grunt-usemin to help solve this problem.
index.html:
It might take a little effort to get this to work, depending on the version of
Yo
and generator you used to scaffold your application.Note that the
cssmin:dist
task has been disabled by default now, and the order of your build sub-tasks should resemble the latest Gruntfile.The benefit of going this route is you don't have to copy over source files from bower_components. Grunt and Usemin will automatically recognize the block, concatenate the files, then minify them into one new file, as opposed to several.
I would use Grunt-Contrib-Copy to copy that folder for you.
There's a fairly comprehensive discussion of the issue in this stackoverflow answer, but it still took me a while of hacking to get all the steps right.
First if you are using sass, include font-awesome on the top:
This works were running 'grunt serve' but icons were missing when I ran 'grunt serve:dist'.
For grunt build to dist, add the following in Gruntfile.js under the 'copy' task:
Your entire 'copy' task may look something like this (my sample):
Then 'grunt serve:dist' worked and the icons displayed correctly. Hope this saves someone's time!