How do I Create iPhone Style Bottom Navbar With Custom Gylph icons for my Bootstrap 3.0 Theme?

Question

Designing a custom website theme for my dad who used to be a cornerman for amateur boxers in Guadalajara (where he met my mexican mom!).

I made the the Pills navigation using .nav-pills like shown here => http://getbootstrap.com/components/#nav-pills but my dad want's an iphone bottom anchored type navbar with icons of gloves for the "news" section, a bloody towel icon for the cutman tips section etc.

So kind of like this iphone nav bar shown below, but my constraints are i want to develop it as a mobile web app in bootstrap that is responsive and shows a navbar that looks like iphone bar (hope this makes sense?!!! OMG!)

Following example from this Stack overflow answer uses JQuery Mobile. I can't use jquery mobile in my bootstrap theme as it's overkill (right?)!

So 2 Questions

1) Does anyone have samples that can make this type of nav bar / menu? Using Bootstrap 3.0 FYI in static generated website with HTML5 and Javascript and CSS and bootstrap framework with responsive end goals.

2) Where can I get custom glpyh icons designed just like standard bootstrap glpyhs (willing to pay upto 50$ per icon) for the gloves and bloody towel icons that will go in the menu bar at bottom?

As for my efforts, I tried various things using the Pills navbar on bootstrap as a starter, but just can't seem to get the background image working, as well as bars that look like iphone bottom bar! Also searched online for glyph makers, no luck, all spammy stock sites.

Thanks a lot!!!!

Answer 1

This example on Bootply should help you get started..

http://bootply.com/106743

The bottom navbar uses the xs Bootstrap grid columns to prevent vertical stacking on smaller screens (iPhone). You can use the included glyphicons icons, or take a look at FontAwesome for more icons.