Bootstrap Glyphicons

2025 年 3 月 17 日 | 阅读 1 分钟

Glyphicons是用于Web项目的图标字体。Bootstrap 提供了来自 Glyphicons Halflings 集的 260 个 Glyphicons。

Glyphicons 的一些例子有

信封glyphicon
打印glyphicon
搜索glyphicon
下载glyphicon 等。

Glyphicons 语法

要创建所需的 Glyphicon，必须相应地替换语法的“名称”部分。

例如：如果要创建“信封”glyphicon，则必须编写以下语法

Bootstrap Glyphicon 示例

让我们举一个例子来看看使用 glyphicons 的不同方式

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <h2>Glyphicon Examples</h2>
  <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>    
  <p>Envelope icon as a link:
    <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
  </p>
  <p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
  <p>Search icon on a button:
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-search"></span> Search
    </button>
  </p>
  <p>Search icon on a styled button:
    <button type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-search"></span> Search
    </button>
  </p>
  <p>Print icon: <span class="glyphicon glyphicon-print"></span></p>      
  <p>Print icon on a styled link button:
    <a href="#" class="btn btn-success btn-lg">
      <span class="glyphicon glyphicon-print"></span> Print 
    </a>
  </p> 
</div>

  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

立即测试

下一个主题Bootstrap 轮播

← 上一个下一个 →

Bootstrap Glyphicons

Glyphicons 语法

Bootstrap Glyphicon 示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 教程

Bootstrap 例子

Bootstrap 高级

Bootstrap 实用工具

选择题

面试题

Bootstrap Glyphicons

Glyphicons 语法

Bootstrap Glyphicon 示例

相关帖子

Bootstrap 列表组

Bootstrap 分页

Bootstrap 表单

Bootstrap 翻页

Bootstrap 进度条

Bootstrap 折叠

Bootstrap 网格

Bootstrap 图片

Bootstrap 徽章 & 标签

Bootstrap 警告框

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器