yeoman generator font awesome

Question

I created a mobile application with the yeoman mobile-generator.
Now I want to add font awesome. I tried this, but not really works in the compiling process. A small advice or experience would be great

Okay, it's really a bit unclear. Sorry.
The compiling process works, but console says 404 not founds for the fonts.
It's not really clear to me how is a good way to do this. Creating the CSS from the scss files, implemeted the .min.css in the index.html with "<-- build: ... -->" or something else?!

When I add this in my main .scss file the the fonts would not be found.

$fontAwesomePath: "../bower_components/font-awesome/fonts";
@import '../bower_components/font-awesome/scss/font-awesome.scss';

Grunt copies and renames the font files f.e. to:

5a6b8fb8.FontAwesome

If you have compiler issues, post the errors... Nobody will be able to help you if you don't do a little effort to make your question clear. — Macmade, Nov 04 '13 at 19:32

score 2 · Answer 1 · answered Jan 28 '14 at 04:10

2

Sounds like grunt rev https://github.com/cbas/grunt-rev is renaming your font file. Just look for something like this in your Gruntfile:

// Renames files for browser caching purposes
rev: {
  dist: {
    files: {
      src: [
        '<%= yeoman.dist %>/styles/fonts/*'
...

remove the fonts line and you should be okay.

answered Jan 28 '14 at 04:10

bpaul

1,949
1
13
23

No problem, Let me know if you need any more help – bpaul Jan 28 '14 at 22:50
Thanks for the answer, what do you use to copy the font files to the dist folder? did you add a copy task? – Urigo Apr 16 '14 at 22:43
Yes, I just add styles/fonts/* to the src under the copy task: `src: ['*.{ico,png,txt}', '.htaccess', 'images/{,*/}*.{webp}', 'styles/fonts/*']` – bpaul Apr 21 '14 at 23:40

score 2 · Accepted Answer · edited May 23 '17 at 12:11

2

Ok,
seems I could fixed this with the help of this answer.
Installed font awesome with bower:

bower install --save font-awesome

Then simply this line in the index.html fixed my problem.

<!-- build:css styles/vendor/fontawesome.css -->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- endbuild -->

Thanks @OddEssay and @bpaul for our help!!

edited May 23 '17 at 12:11

Community

1
1

answered Jan 29 '14 at 19:36

chris

4,827
6
35
53

score 1 · Answer 3 · answered Nov 07 '13 at 00:44

1

@importing the scss takes care of the CSS side of things, but I think you also need to move the assests to a location the browser can access them, so grunt-contrib-copy would do the job perfectly. So if your webroot is public Something like:

copy: {
      main: {
        files: [
          {expand: true, cwd: '../bower_components/font-awesome/fonts', src: ['*.*'], dest: 'public/fonts'}
               ]
      }

answered Nov 07 '13 at 00:44

OddEssay

1,334
11
19

thanks. but the problem I think is, that grunt renames the fonts, and the original font path is not the right one. – chris Nov 07 '13 at 18:56
The files do need to be copied but in this case it seems the problem is with with grunt rev. See my answer below. – bpaul Jan 28 '14 at 04:16

yeoman generator font awesome

3 Answers3

Linked