Wie erstelle ich iPhone Style Unteren Navigationsleiste Mit Benutzerdefinierten Gylph icons für meine Bootstrap 3.0 Theme?

Entwerfen Sie eine benutzerdefinierte website-Design für meinen dad, die verwendet werden, um ein Sekundant für amateur-Boxer in Guadalajara (wo er traf meine Mexikanische Mama!).

Machte ich die Pillen navigation mit .nav-pills wie hier gezeigt => http://getbootstrap.com/components/#nav-pills, aber mein Vater will ein iphone Boden verankert Art Navigationsleiste mit icons, die Handschuhe für die "news" - Bereich, ein blutiges Handtuch Symbol für die cutman-Tipps § etc.

So ein bisschen wie das iphone nav bar unten gezeigt, aber meine Zwänge sind, die ich weiterentwickeln möchte es als mobile web app in der bootstrap reagiert und zeigt eine Navigationsleiste, die so aussieht wie das iphone bar (hoffe, das macht Sinn?!!! OMG!!!)

Folgenden Beispiel aus dieser Stack overflow Antwort verwendet JQuery Mobile. Ich kann nicht mit jquery mobile in meiner bootstrap Thema, wie es übertrieben (oder?)!

Also 2 Fragen

1) Hat jemand Beispiele, dass diese Art der nav-Leiste /Menü? Mit Bootstrap 3.0 FYI in statisch generierten website mit HTML5 und Javascript-und CSS und bootstrap-framework mit responsive Ende Ziele.

2) Wo bekomme ich custom glpyh icons entworfen, genauso wie standard-bootstrap-glpyhs (zu zahlen bereit bis zu 50$ pro Symbol) für die Handschuhe und blutige Handtuch Symbolen, gehen Sie in der Menüleiste am unteren Rand?

Als meine Bemühungen, ich habe versucht, verschiedene Dinge mit den Pillen navbar auf bootstrap als starter, sondern kann einfach nicht scheinen, um das Bild im hintergrund arbeiten, sowie bars, die Aussehen wie iphone bottom bar! Auch gesucht online für die Glyphe ' Macher, kein Glück, alle Spam-Lager-Websites.

Vielen Dank!!!!