Font Awesome

There are many CSS libraries out there which you can use, for free, by simply linking to them in your HTML file. These libraries will make it easy for you to design slick and professional looking applications.

Here are some of the popular CSS libraries:

• bootstrap
• Semantic-UI
• material-ui
• bulma
• pure
• Flat-UI
• and many more!

For this tutorial, I will stick to my styling. However, to show you how an external library can be used, we will add Font Awesome. Add the following link to the head element of index.hbs and search.hbs:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Font Awesome is the web's most popular icon set and toolkit. We will use it to replace the GO text on the search button with a magnifier icon.

- <button type="submit" class="searchButton">GO</button>
+ <button type="submit" class="searchButton">
+   <i class="fa fa-search"></i>
+ </button>

Make sure you do the update in both index.hbs and search.hbs.

Run the application and visit http://localhost:4567.

Make sure to visit http://localhost:4567/search too.

Notice the magnifier icon!