HTML – 如何为我的Bootstrap 3.0主题创建自定义Gylph图标的iPhone样式底部导航栏？

为我父亲设计一个自定义网站主题,他曾经是瓜达拉哈拉业余拳击手的角落人员(在那里他遇到了我的墨西哥妈妈！).

我使用.nav-pills进行了Pills导航,如下所示=> http://getbootstrap.com/components/#nav-pills但是我父亲想要的是一个iphone底部锚定型导航栏,带有“新闻”部分的手套图标,一个用于切割技巧部分的血腥毛巾图标等.

有点像下面显示的这个iphone导航栏,但是我的约束是我想将它开发为一个响应中的移动web应用程序,并显示一个看起来像iphone栏的导航栏(希望这有道理？!!! OMG！ )

以下示例来自this Stack overflow回答使用JQuery Mobile.我不能在我的bootstrap主题中使用jquery mobile,因为它太过分了(对吧？)！

所以2个问题

1)有没有人有样品可以制作这种类型的导航栏/菜单？在静态生成的网站中使用Bootstrap 3.0 FYI,使用HTML5和Javascript以及CSS和具有响应最终目标的引导框架.

2)我在哪里可以获得设计的glpyh图标,就像标准的bootstrap glpyhs(愿意为每个图标支付高达50美元)一样,手套和血淋淋的毛巾图标将放在底部的菜单栏中？

至于我的努力,我尝试使用Pills导航栏作为启动器的各种东西,但似乎无法让背景图像工作,以及看起来像iphone底栏的栏！还在网上搜索字形制造商,没有运气,所有垃圾邮件库存网站.

非常感谢！！！！