Eye Candy

At this point, you should be ready to start making changes to the templates and get a feel for how Ionic apps work. Hopefully you have some experience with HTML and Javascript, if not; Codecademy has some excellent online courses to get you familiar.

If you go find the app you created previously, you will find a few folders. The one you will be primarily working with are in the WWW directory. From there it should be pretty self explanatory as to what is in each child folder. Most of the work will be done in the templates folder, where the html files are stored. If you open one up you will find that most of the normal HTML tags you would expect aren't used much. You can, but a lot of the ionic tags provide you with a substantial amount of functionality without much effort.

For example, you could easily add an icon with the  <i> tag, as well as apply a color to it without actually creating the icon.  Icons, colors, and styles are all included in the Ionic library and are easily found here and here.

So lets add a Facebook icon to our sidemenu app we previously created. The actual menu in the app is located in the menu.html file the templates folder. Open that up and you will notice the tag for the login button looks like this:

<ion-item nav-clear menu-close ng-click="login()">
          Login
</ion-item>

We can change the look of the login button by adding a color and an icon with the class attribute. We can class the login button as an icon, and set it to blue with the Facebook icon by adding:

class="icon ion-social-facebook positive"

So that it should look like this:

If you wanted to leave the actual login text alone, just put {class="icon ion-social-facebook positive"} into an <i> tag.

Like so:

 <i class="icon ion-social-facebook positive"></i>

A quick note, I was forced to close the <i> tag in that manner, if you try to close the tag in the initial tag, it will not properly close it, and cause undesired results. But if done right, it should look like this.

To break it down, "ion-social-facebook" determines which icon it will display, and "positive" determines the color. These colors are in the ionic.css, so you can modify them if you wish. A CSS file is also located in the CSS folder if you would rather style it the old fashioned way, and since Ionic is built on Sass you could also modify the color variables within the variables.scss file, or add your own.

Inside your app folder, navigate to and open the variables.scss file. It's located at:

www\lib\ionic\scss\_variables.scss

The colors are right there at the top, so feel free to use your favorite hex color picker to modify them. You could add your own if you have experience with Sass.