Bootstrap 字形图标

字形图标

Bootstrap 通过 Glyphicons Halflings 集，提供了 260 种字形图标。

字形图标可以用于文本、按钮、工具栏、导航、表单等。

下面是一些字形图标的例子:

信封图标:

打印图标:

查询图标:

下载图标:

Glyphicon 语法

使用以下语法插入字形图标:

<span class="glyphicon glyphicon-name"></span>

以上语法中的 name 部分必须替换为 glyphicon 的正确名称。

Glyphicon 实例

下面的实例显示了使用图标的不同方式:

实例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>Glyphicon 实例</h2>
  <p>信封图标: <span class="glyphicon glyphicon-envelope"></span></p>
  <p>信封图标链接:
    <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
  </p>
  <p>查询图标: <span class="glyphicon glyphicon-search"></span></p>
  <p>查询图标按钮:
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-search"></span> 查询
    </button>
  </p>
  <p>基于按钮样式上的查询图标:
    <button type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-search"></span> 查询
    </button>
  </p>
  <p>打印图标: <span class="glyphicon glyphicon-print"></span></p>
  <p>基于链接样式上的打印图标:
    <a href="#" class="btn btn-success btn-lg">
      <span class="glyphicon glyphicon-print"></span> 打印
    </a>
  </p>
</div>
</body>
</html>

运行一下

完整的 Bootstrap 字形图标参考引用

有关所有图标的完整参考，请访问本站的完整 Bootstrap 字形图标参考。

Bootstrap 字形图标

字形图标

Glyphicon 语法

Glyphicon 实例

实例

完整的 Bootstrap 字形图标参考引用

分类导航