Adding new pic to Tab View Template

[Malak_A_]

Hello Everyone

I used the Tab View template from layout and user interface in intel xdk , after simulate  the output as in picture 

but how can I adding a new icon (like notification) to the tab view . I tried to open icon.css file 

and i found a number of icons , but how can I adding  a new icon to them

note (this code some icons from icon.css file)

.icon.cloud:before {
    content: "\e012";
}
.icon.pin:before {
    content: "\e013";
}
icon.search:before {
    content:"\e037";
}

Thanks in advance, I am waiting any help 

[Shahab_L_Intel]

To add an icon to the icons at the bottom of the page, you can add an item to the 'footer' list

        <footer>
            <a href="#tab1" class="icon home" onclick="$.afui.clearHistory()">Home</a>

            <a href="#tab5" class="icon new" onclick="$.abc()">New Icon</a>

A number of icons are listed in icons.css, you can use any icons in there, or you can use icons you define or find somewhere else.  See: http://www.w3schools.com/icons/