11 Font Awesome

Fonts

It would be nice if we had a nice little icon to complement the text on our "New Note" button.

Let's add another dependency to our project: Font-Awesome, a popular icon webfont.

First, let's see if bower can find it:

$ bower info font-awesome

Looks like we are in business. Let's install it! Add it to bower.json

bower.json

    "font-awesome": "4.4.x"

Again, don't forget to add a comma to the line above.

Now run:

npm install

Then, you should be able to add this to index.html:

app/index.html

  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">

And verify that it's working by adding this <i> tag to sidebar.html:

app/sidebar.html

<nav id="sidebar">
  <button class="new-note btn btn-default" ng-click="clearNote()">
    <i class="fa fa-plus-circle"></i>
    New Note
  </button>

If you refresh the page, you should see a nice little icon.

Let's commit:

$ git add .
$ git commit -m "Add font-awesome."
$ git push