下载APP 编程狮,随时随地学编程
返回 首页

Bootstrap 教程

Bootstrap Glyphicons

Bootstrap Glyphicons

目标

字体图标由于它的一些好处变得越来越流行了。在本教程中我们将讨论如何通过 Bootstrap 3 来使用和定制 Glyphicons。我们将解释在后台工作的 CSS 规则,这将让您更好的了解图标字体的工作原理。这样,您就能熟悉除了 Glyphicons 之外的任何图标字体设置。

什么是 Glyphicons

Glyphicons 是在 Web 项目中使用的图标字体。虽然,使用 Glyphicons 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。为了表示对图标作者的感谢,希望您在使用时加上 Glyphicon 网站 的链接。

获取 Glyphicons

如果您已经从 https://github.com/twbs/bootstrap/releases/download/v3.0.2/bootstrap-3.0.2-dist.zip 下载 Bootstrap 3(或者任何版本 3 之前的版本),您可以找到 dist 文件夹内的 fonts 文件夹内的 glyphicons。这里有四个文件 - glyphicons-halflings-regular.eot、glyphicons-halflings-regular.svg、glyphicons-halflings-regular.ttf 和 glyphicons-halflings-regular.woff。相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。

如何使用 Glyphicons

一般来说,我们可以得出通过 Bootstrap 3 使用 Glyphicons 的常见语法如下

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

* 可以是任意代表特定图标的关键词。下面的实例演示了如何通过按钮使用它。

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>

在线查看实例。

带有导航栏的 Glyphicon

实例

<!DOCTYPE html>
<html>
<head>
    <title>导航栏的字形图标</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding-top: 50px;
            padding-left: 50px;
        }
    </style>
    <!-- HTML5 Shim 和 Respond。js IE8支持 HTML5 元素和媒体查询 -->
    <!-- WARNING: Respond。如果你通过file://查看页面js将不工作 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home">Home</span></a></li>
                <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</span></a></li>
                <li><a href="#support"><span class="glyphicon glyphicon-headphones">Support</span></a></li>
            </ul>
        </div><!-- /.nav-collapse -->
    </div><!-- /.container -->
</div>
<!-- jQuery (对于Bootstrap的JavaScript插件是必要的) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有插件(下面),或者所需要的单个文件 -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

在线查看实例

CSS 规则解释

下面的 CSS 规则构成 glyphicon class

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
}

所以 font-face 规则实际上是在找到 glyphicons 地方声明 font-family 和位置。

.glyphicon class 声明一个从顶部偏移 1px 的相对位置,呈现为 inline-block,声明字体,规定 font-style 和 font-weight 为 normal,设置行高为 1。除此之外,使用 -webkit-font-smoothing: antialiased-moz-osx-font-smoothing: grayscale; 获得跨浏览器的一致性。

然后,这里的

.glyphicon:empty {
  width: 1em;
}

是空的 glyphicon。

这里有 200 个 class,每个 class 针对一个图标。这些 class 的常见格式如下

.glyphicon-keyword:before {
  content: "hexvalue";
}

比如,在我们实例中使用的 user 图标,它的 class 如下

.glyphicon-user:before {
  content: "\e008";
}

我们已经看到如何使用它,接下来我们看看如何定制 Glyphicons。

我们将以上面的实例开始,并通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。

下面是开始的代码

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>

效果如下所示


定制字体尺寸

通过增加或减少图标的字体尺寸,您可以让图标看起来更大或更小。

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
  <span class="glyphicon glyphicon-user"></span> User
</button>


定制字体颜色

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
  <span class="glyphicon glyphicon-user"></span> User
</button>


应用文本阴影

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
  <span class="glyphicon glyphicon-user"></span> User
</button>



定制 Glyphicons

点击这里,在线定制 Glyphicons。

目录

Bootstrap 教程

Bootstrap 教程导读
Bootstrap 简介
Bootstrap 环境安装
Bootstrap 编程实战闯关

Bootstrap CSS

Bootstrap CSS 概览
Bootstrap 网格系统
Bootstrap 排版
Bootstrap 代码
Bootstrap 表格
Bootstrap 表单
Bootstrap 按钮
Bootstrap 图片
Bootstrap 辅助类
Bootstrap 响应式实用工具

Bootstrap 布局组件

Bootstrap 字体图标
Bootstrap 下拉菜单
Bootstrap 按钮组
Bootstrap 按钮下拉菜单
Bootstrap 输入框组
Bootstrap 导航元素
Bootstrap 导航栏
Bootstrap 面包屑导航
Bootstrap 分页
Bootstrap 标签
Bootstrap 徽章
Bootstrap 超大屏幕
Bootstrap 页面标题
Bootstrap 缩略图
Bootstrap 警告
Bootstrap 进度条
Bootstrap 多媒体对象
Bootstrap 列表组
Bootstrap 面板
Bootstrap Well

Bootstrap 插件

Bootstrap 插件概览
Bootstrap 过渡效果(Transition)插件
Bootstrap 模态框(Modal)插件
Bootstrap 下拉菜单(Dropdown)插件
Bootstrap 滚动监听(Scrollspy)插件
Bootstrap 标签页(Tab)插件
Bootstrap 提示工具(Tooltip)插件
Bootstrap 弹出框(Popover)插件
Bootstrap 警告框
Bootstrap 按钮(Button)插件
Bootstrap 折叠(Collapse)插件
Bootstrap 轮播(Carousel)插件
Bootstrap 附加导航(Affix)插件

Bootstrap 其他

Bootstrap UI 编辑器
Bootstrap v2 教程
Bootstrap HTML编码规范
Bootstrap CSS编码规范

Bootstrap 相关教程

Bootstrap 入门教程

Bootstrap 版本更新

Bootstrap4 首个Beta版发布:距上次发布已7月之久!
Bootstrap v4.0.0-beta.2 发布,Web 前端 UI 框架

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }