详解Bootstrap glyphicons字体图标
本章将讲解字体图标(Glyphicons)，并通过一些实例了解它的使用。Bootstrap 捆绑了 200 多种字体格式的字形。首先让我们先来理解一下什么是字体图标。
首先给大家介绍什么是字体图标：
字体图标是在 Web 项目中使用的图标字体。字体图标在下载的Bootstrap的fonts文件夹中。
.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;
}
.glyphicon class 声明一个从顶部偏移 1px 的相对位置，呈现为 inline-block，声明字体，规定 font-style 和 font-weight 为 normal，设置行高为 1。除此之外，使用-webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 获得跨浏览器的一致性。
关于-webkit-font-smoothing和-moz-osx-font-smoothing：
-webkit-font-smoothing属性。这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。
none ------ 对低像素的文本比较好
subpixel-antialiased ------默认值
antialiased ------抗锯齿很好
auto
inherit ------继承父元素
initial
-moz-osx-font-smoothing属性,其中-osx-表明这是mozilla难得的给特定操作系统推出的特性增强，由于缺乏文档，目前已知的取值是：
grayscale ------抗锯齿很好
auto ------默认值
inherit ------继承
Bootstrap提供了200个字体图标，每个图标对应一个class，在使用时，我们只需要包含glyphicon和对应的class即可。
使用方法：
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>demo</title>
<link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{padding: 20px;}
</style>
</head>
<body>
<span class = "glyphicon glyphicon-lock"></span>
<span class = "glyphicon glyphicon-lock" style = "font-size:30px;"></span>
<span class = "glyphicon glyphicon-lock" style = "font-size:60px;"></span>
</body>
</html>
配合button使用：
<body>
<button class="btn btn-default">
<span class = "glyphicon glyphicon-home"></span>
</button>
<button class="btn btn-success">
<span class = "glyphicon glyphicon-home"></span> Home
</button>
<button class="btn btn-info">
<span class = "glyphicon glyphicon-home"></span> Home
</button>
<button class="btn btn-warning">
<span class = "glyphicon glyphicon-home"></span> Home
</button>
<button class="btn btn-warning btn-lg">
<span class = "glyphicon glyphicon-home"></span> Home
</button>
<button class="btn btn-warning btn-sm">
<span class = "glyphicon glyphicon-home"></span> Home
</button>
</body>
效果：
定制字体图标
在上一个例中，其实我们已经实现了对字体图标大小和颜色的定制，此处再做进一步说明。
通过改变字体的大小或button的大小，可以改变字体图标的大小。
通过设置color的颜色，可以改变字体图标的颜色，如下：
<body>
<button class="btn btn-success">
<span class = "glyphicon glyphicon-home"></span> Home
</button>
<button class="btn btn-success" style="color:#FF0000;">
<span class = "glyphicon glyphicon-home"></span> Home
</button>
<button class="btn btn-success">
<span class = "glyphicon glyphicon-home" style="color:#FF0000;"></span> Home
</button>
</body>
效果：
可以看出：通过改变其父元素或者是span本身的color，都可以改变字体图标的颜色。
应用文本阴影
<body>
<button class="btn btn-success">
<span class = "glyphicon glyphicon-home"></span> Home
</button>
<button class="btn btn-success btn-lg" style="text-shadow: black 3px 2px 3px;">
<span class = "glyphicon glyphicon-home"></span> Home
</button>
<button class="btn btn-success btn-lg">
<span class = "glyphicon glyphicon-home" style="text-shadow: black 3px 2px 3px;"></span> Home
</button>
</body>
更多请查看字体图标，可以bootstrap官方文档：
以上内容给大家介绍了Bootstrap glyphicons字体图标的相关知识，希望大家喜欢。
相关推荐
-
Bootstrap字体图标无法正常显示的解决方法
bootstratp作为一个优秀的前端框架,最近使用了其中的Glyphicon Halflings的字体图标.起初一直显示不出来,后面通过搜索相关资料直到成功显示,在此做一些总结,方便后面复习. 1.在html页面引入bootstrap <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>xxxx</title> <link href=&qu
-
JS组件系列之Bootstrap Icon图标选择组件
前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的class样式.于是乎各种百度,皇天不负有心人,最后被博主找到了,感觉效果还不错,并且支持自定义的图标,今天就拿出来分享下,绝对的干货哦! 一.Bootstrap icon picker组件 这个组件是在github上面搜索的时候找到的,初初看上去,确实是很不错的,并且是基于bootstrap风格的
-
bootstrap布局中input输入框右侧图标点击功能
使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标,如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的: 那么问题来了,怎样让这些小图标能够获得点击事件呢? 我也不知道,但是可以用一种迂回的方式,来间接的实现该功能. ***重点来了: 解决方案:在小图标的位置上,添加一个看不见的元素,元素的大小正好将小图标覆盖,但是没有背景颜色和边框:相当于给小图标盖了一个透明的被子: 复制代码 代码如下: <di
-
很不错的两款Bootstrap Icon图标选择组件
一.Bootstrap icon picker组件 这个组件是在github上面搜索的时候找到的,初初看上去,确实是很不错的,并且是基于bootstrap风格的,所以更加适合使用bootstrap风格布局的项目.既然是github上面的,毋庸置疑,这是一个开源组件,源码地址.好了,说了这么多,一起来看看它到底长啥样子吧. 1.组件效果预览 第一次初始化 支持"上一页"和"下一页" 支持自定义图标的选择 支持模糊搜索图标,比如我们搜索camera 选择图标后对应的样式
-
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
你在使用bootstrap字体图标的时候,是否遇到引用本地Bootstrap文件无法显示字体图标,而使用CDN服务器上bootstrap却能正常显示的问题. 在不能正常显示的时候,比如我要在一个按钮中使用一个√的字体图标,我的代码是这样子的: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap字体图标
-
BootStrap glyphicon图标无法显示的解决方法
如果不注意bootstrap引入css和fonts的规范,则可能会导致bootstrap 在显示glyphicon图标时无法正常显示,显示为方框. 此时可搜索bootstrap.css中的.glyphicon,可发现其大约上下10行左右有引入字体的URL,如下所示: 确保该目录存在即可. 通常出错是因为路径不正确所致. 以上所述是小编给大家介绍的BootStrap glyphicon图标无法显示的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家
-
Bootstrap3 input输入框插入glyphicon图标的方法
bootstrap3如何在input输入框插入glyphicon图标呢?插入图标看起来比较醒目,满足用户体验价值观,此功能应用于各大网站. 怎么把图标放在输入框的开头?? <div class="form-group has-feedback"> <label class="col-md-2 control-label" for="username">用户名</label> <div class=&quo
-
BootStrap glyphicons 字体图标实现方法
相关阅读: 详解Bootstrap glyphicons字体图标 先给大家说下什么是字体图标? 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标. 为了表示对图标作者的感谢,希望您在使用时加上 GLYPHICONS 网站的链接. 使用bootstrap很久了,内置的 glyphicons 图标,足以满足 小型项目的需求.只需要使用一个样式,即可调出图标.虽然感觉很神奇,一直没
-
bootstrap中添加额外的图标实例代码
说明 可以针对校验状态为输入框添加额外的图标.只需设置相应的 .has-feedback 类并添加正确的图标即可 示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m
-
详解Bootstrap glyphicons字体图标
本章将讲解字体图标(Glyphicons),并通过一些实例了解它的使用.Bootstrap 捆绑了 200 多种字体格式的字形.首先让我们先来理解一下什么是字体图标. 首先给大家介绍什么是字体图标: 字体图标是在 Web 项目中使用的图标字体.字体图标在下载的Bootstrap的fonts文件夹中. .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halfling
-
详解bootstrap用dropdown-menu实现上下文菜单
详解bootstrap用dropdown-menu实现上下文菜单 写在前面: 所谓上下文菜单,它与一般菜单的区别在于: 通过右键触发显示在鼠标右键点击处 鼠标在别处点击后,该菜单消失 实现方法: 在html中定义一个普通的没有触发条件的dropdown-menu,然后写这个menu的父容器的监听即可实现. 代码: <div id="settingInGraph"> <ul class="dropdown-menu" role="menu&
-
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Affix是BootStrap中的一个很有用的控件,他能够监视浏览器的滚动条的位置并让你的导航始终都在页面的可视区域.一开始的时候,导航在页面中是普通的流式布局,占有文档中固定的位置,当页面滚动的时候,导航就自动变成了固定布局(fixed),始终处于用户的视区,下面来说说他的用法.首先来看看他的实现原理.它是通过实时修改页面元素的class属性来实现的 开始的时候应用affix的元素的class中会自动添加affxi-top属性 当滚动条滚动以至于导航快要到页面顶部的时候这时候在元素的class
-
详解Bootstrap各式各样的按钮(推荐)
Bootstrap为我们提供了各式各样漂亮的按钮,我们无需自己给按钮写样式,直接使用它给我们提供的类样式,使用在我们的按钮上,非常的简单方便. 为尊重原创这里贴一下参考的教程:http://www.runoob.com/bootstrap/bootstrap-buttons.html.在我的很多笔记中,您可能会看到我贴的www.runoob.com相关的网址,在这里先声明这不是广告,我只是觉得每个人的劳动成果都应该被尊重.这个网站收集了很多的信息,供我学习,我非常的感激,借鉴于这些很好的教程,我
-
详解Bootstrap网格垂直和水平对齐方式
目录 1.Bootstrap网格布局 2.垂直对齐 2.1 row标签中设置垂直对齐 2.2 col标签中设置垂直对齐 3.水平对齐 3.1 row标签中设置垂直对齐 1.Bootstrap网格布局 上一节我们介绍了Bootstrap中的网格,网格在网页布局中是一个重点和难点,布局是网页设计的起点和基础,一定要花功夫弄懂,最起码把我写的教程介绍的内容弄懂,因为我写的都是最常用的和最基础的.当然对于一个有一定基础的网页设计师,这些内容相信一看就懂,今天我们进一步学习网格布局. 本节内容涉及到通用类
-
详解Bootstrap 学习（一）入门
一:什么是Bootstrap? Bootstrap是目前留下的前端框架之一,具备已下特点: 基于HTML.CSS.JavaScript开发的: 样式展现方面定义了大量全局样式.列表.按钮等样式组件: 特效方面实现了轮播.菜单等常用的js控件: 样式采用less编写,js调用了jquery库: 来自Twitter,现在委托保管再github上. Bootstrap适用于网站的开发,不适用于管理系统(例如ERP)开发,它提供的css组件比较多,js控件比较少,因此可以称bootstrap是一套css
-
详解Bootstrap插件
在前面 布局组件 章节中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的 JavaScript 开发人员,您也可以着手学习 Bootstrap 的 JavaScript 插件.利用 Bootstrap 数据 API(Bootstrap Data API),大部分的插件可以在不编写任何代码的情况被触发. 站点引用 Bootstrap 插件的方式有两种: 单独引用:使用 Bootstrap 的个别的 *.j
-
详解iOS 关于字体根据不同屏幕尺寸等比适配的问题
背景 去年的六月份开始了一个新的项目,此项目支持的设备从4S开始一直到6+,也就是说屏幕的尺寸最小的320x480 最大的1242x2208 (不过目前好像大部分的App都会这样去支持),而客户那边有一个奇葩要求 就是所有的控件布局必须依据屏幕的尺寸等比缩放.当然这个对于iOS的开发来说的话还是比较容易实现的(iOS有个Autoresizing刚好是依据父视图的大小作等比缩放的). 项目就这样愉快的进行,然而当项目快要结束的时候,客户愤怒质问我们为什么字体大小没有根据屏幕作等比适配,再有几天的时