Bootstrap 2 图标 - Bootstrap 2 基础教程

Bootstrap 2 使用了 Glyphicons 提供的图标

本节我们将学习如何使用 Bootstrap 2 工具包来创建图标

注意：使用 Glyphicons 图标必须添加 Glyphicons 的链接

作为 CSS Sprite 使用

Glyphicons 将所有的图标图像都捆绑到一起，并通过 background-position CSS 属性使用

图像文件是 glyphicons-halflings.png，位于 Bootstrap 主文件夹下的 img 文件夹

Bootstrap.min.css 已经添加了图标的样式以及背景位置

为避免冲突，所有的图标 class 都以 "icon-" 为前缀

Bootstrap 2 中定义了 120 个图标 class

如何在站点或 app 中使用图标

下面是在站点或 app 中使用图标的通用语法

<i class="icon_class_name"></i>

其中 "icon_class_name" 是在 bootstrap.css 中定义的图标 class 的名称，例如：icon-music、icon-star、icon-user

如果想要使用白色图标，可以添加一个额外的 icon-white class

<i class="icon_class_name icon-white"> </i>

如果想要在使用图标时带上一些字符串，记得在之后添加一些空格

范例 1

创建一个搜索表单

<form class="well form-search">
    <input type="text" class="input-medium search-query">
    <button type="submit" class="btn"><i class="icon-search"></i> 搜索</button>
</form>

运行范例 »

运行以上范例，输出效果如下

Bootstrap 2 icons demo

范例 2

在导航中使用图标

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li class="active"><a href="#"><i class="icon-user"></i> Home</a></li>
                    <li><a href="#about"><i class="icon-user "></i> User</a></li>
                    <li><a href="#about"><i class="icon-download "></i> Downlaod</a></li>
                    <li><a href="#about"><i class="icon-upload "></i> Upload</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</div>

运行范例 »

运行以上范例，输出效果如下

Bootstrap 2 icons demo

范例 3

在按钮和按钮组中使用图标

<div class="btn-toolbar" style="margin-bottom: 9px">
    <div class="btn-group">
        <a class="btn" href="#"><i class="icon-align-left"></i></a>
        <a class="btn" href="#"><i class="icon-align-center"></i></a>
        <a class="btn" href="#"><i class="icon-align-right"></i></a>
        <a class="btn" href="#"><i class="icon-align-justify"></i></a>
    </div>
    <div class="btn-group">
        <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
        <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
            <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
            <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
            <li class="divider"></li>
            <li><a href="#"><i class="i"></i> Make admin</a></li>
        </ul>
    </div>
</div>
<p>
    <a class="btn" href="#"><i class="icon-refresh"></i> Refresh</a>
    <a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-white"></i> Checkout</a>
    <a class="btn btn-danger" href="#"><i class="icon-trash icon-white"></i> Delete</a>
</p>
<p>
    <a class="btn btn-large" href="#"><i class="icon-comment"></i> Comment</a>
    <a class="btn btn-small" href="#"><i class="icon-cog"></i> Settings</a>
    <a class="btn btn-small btn-info" href="#"><i class="icon-info-sign icon-white"></i> More Info</a>
</p>

运行范例 »

运行以上范例，输出效果如下

Bootstrap 2 icons demo