in Basset, Laravel, Our Authors

How to use Font Awesome with Basset?

This article explains how to use third party font icon sets with Basset – better asset management for Laravel.

In this guide, we will include Font Awesome with Bower and use icons in our Laravel application.

This example will have collection named app. First we will add our app collection to collections.json which is used by Basset.

{
  "collections": {
    "app": {
      "bower": "bower.json",
      "css" [
        "app.less"
      ]
    }
  }
}

Here we added main app.less file for css of this collection, and we added where the location of the bower.json will be, relative to collection.

We will put this collection to resources/assets folder, and the files will be inside the folder with the name of the collection.

And app.less and bower.json file will be located in resources/assets/app folder.

So your files and folders will look like this:

resources/assets/
└─────────────── app/
                ├─── bower_components/
                ├─── app.less
                └─── bower.json

We will now install Font Awesome with Bower. Use your Terminal and go into resources/assets/app folder and run:

bower install font-awesome --save

This will install font awesome into bower_components.

Now Basset will automatically wire in the font-awesome.css into our collection files when we run gulp build.

But the font relative paths will be wrong and the font will not load properly. We need to tell Basset that in this case we don’t want it to load default font-awesome.css file. We can do this by editing the bower.json file. We will add override for font-awesome, like this:

{
  "name": "app",
  "private": true,
  "dependencies": {
    "font-awesome": "~4.3.0"
  },
  "overrides": {
    "font-awesome": {
      "main": []
    }
  }
}

This override tells Basset that font-awesome component doesn’t have any main files. This is good, because we will add font-awesome in a different way.

We will need to copy the font files to the public/build folder and Basset has an option for that. You can add fonts key to collection definition which will tell Basset which files you want it to copy as fonts:

{
  "collections": {
    "app": {
      "bower": "bower.json",
      "fonts": [
        "bower_components/font-awesome/fonts/*.*"
      ],
      "css" [
        "app.less"
      ]
    }
  }
}

This will copy all font-awesome font files to public/builds/app/fonts folder. This is the location from which we will load font files.

Now we will modify our app.less to load font-awesome properly. Modify app.less and put:

@import "./bower_components/font-awesome/less/font-awesome.less";

@fa-font-path: "/builds/app/fonts";

This will load font-awesome.less file and it will modify the path for loading font-awesome. Now when you build you should see that the font files are copied into /builds/app/fonts and that the app.less is loading the font-awesome css correctly.

Go ahead and run build with:

gulp build

And use Font Awesome icons in your application.

Share this ...Tweet about this on TwitterShare on FacebookEmail this to someoneShare on RedditShare on Google+Share on LinkedInPin on Pinterest