基于图标的导航 Bootstrap & Jquery Mobile

Question

我正在使用 jQuery Mobile 和 Twitter Bootstrap 创建一个移动应用程序。我正在尝试完成像应用程序导航这样的“跳板”。我有 6 个我想要的图标，每行 3 个。

我目前有：

             <li><img src="img/info.png" /></li>
             <li><img src="img/map.png" /></li>
             <li><img src="img/rules.png" /></li>
             <li><img src="img/calender.png" /></li>
             <li><img src="img/iSchool.png" /></li>
             <li><img src="img/Infinite-Campus.png" /></li>    

我想让它看起来像 Apple 的 Springboard，但图标更大，更有 Windows Phone Metro 的感觉。这可以用这些框架来完成吗？

谢谢！

Answer 1

您可以使用glyphicon classes（假设您已从 Bootstrap 添加字体）并为您的图标指定字体大小：

HTML

<nav>
    <li><span class="glyphicon glyphicon-nameoficon></span></li>
    <li><span class="glyphicon glyphicon-nameoficon></span></li>
    <li><span class="glyphicon glyphicon-nameoficon></span></li>
    <li><span class="glyphicon glyphicon-nameoficon></span></li>
    <li><span class="glyphicon glyphicon-nameoficon></span></li>
    <li><span class="glyphicon glyphicon-nameoficon></span></li>  
</nav>

CSS

nav span{
    font-size:40px;
}

如果您尚未添加字体文件夹，您的文件夹结构如下所示：

project/fonts
project/css/styles.css

基本上，字体文件夹必须比您的样式“上一层”。

希望有所帮助。