CODEWITHSUNDEEP
gruntjsyeomanfont-awesomeyeoman-generator
chris
chris

Reputation: 4867

yeoman generator font awesome

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

Upvotes: 0

Views: 2608

Answers (3)

chris
chris

Reputation: 4867

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

Upvotes: 2

bpaul
bpaul

Reputation: 1949

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.

Upvotes: 2

OddEssay
OddEssay

Reputation: 1362

@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'}
               ]
      }

Upvotes: 1

Related Questions