BootStrap glyphicons字体图标
本章将讲解字体图标(Glyphicons),并通过一些实例了解它的使用。Bootstrap 捆绑了 200 多种字体格式的字形。首先让我们先来理解一下什么是字体图标。
首先给大家介绍什么是字体图标:
字体图标是在 Web 项目中使用的图标字体。字体图标在下载的Bootstrap的fonts文件夹中。
1
2
3
4
5
6
7
8
9
10
11
|
.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即可。
使用方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!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使用:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<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的颜色,可以改变字体图标的颜色,如下:
1
2
3
4
5
6
7
8
9
10
11
|
<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,都可以改变字体图标的颜色。
应用文本阴影
1
2
3
4
5
6
7
8
9
10
11
|
<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 glyphicons字体图标的更多相关文章
- Bootstrap WPF Style(二)--Glyphicons 字体图标
介绍 关于Glyphicons字体图标,首先给出友情链接 Glyphicons 这个项目是在Bootstrap WPF Style项目基础上做的,详见http://www.cnblogs.com/ts ...
- Glyphicons字体图标
Glyphicons字体图标-----好处可以减少请求,容易控制样式! <p> <button type="button" class="btn btn ...
- Bootstrap--组件之Glyphicons字体图标
Glyphicons 字体图标 所有可用的图标 包括250多个来自 Glyphicon Halflings 的字体图标.Glyphicons Halflings 一般是收费的,但是他们的作者允许 Bo ...
- 项目经验:Glyphicons字体图标改造,制造适合自己项目的字体图标
Bootstrap对我们来说已经不陌生了,大型的项目一定会用到它.它的DOM结构,字体图标,组件,响应式布局等,很大程度上提高了WEB开发速度. 在bootstrap刚出来的时候,它拥有丰富的组件.美 ...
- Bootstrap进阶一:Glyphicons 字体图标
基本组件是Bootstrap的精华之一,其中都是开发者平时需要用到的交互组件.例如:网站导航.标签页.工具条.面包屑.分页栏.提示标签.产品展示.提示信息块和进度条等.这些组件都配有jQuery插件, ...
- Bootstrap之字体图标
优点:1.减少请求 2.容易控制样式 所在位置:在下载的bootstrap文件中的fonts文件夹存放字体图标 默认路径为当前目录下,如需修改路径,则需在bootstrap.css中查找font-fa ...
- 关于font awesome或Glyphicons字体图标不能正确显示的问题
此处讨论的是关于本地字体的安装和引进 实际操作经验中,某些网站模板设置的CSS, FONTS目录较深,如果按默认的路径设置,字体图标死活都不会显示. 解决办法是将FONTS目录,安装在网站根目录下 C ...
- MVC.NET 发布后,部署到iis ,网站中的Bootstrap的字体图标不能正常显示
时隔多日没有在博客中记录自己遇到的问题及解决方案了 ,今天给大家分享一个可能会遇到的一个鸡肋bug ! 如果你的项目是MVC并且在项目中引用了 Boostrap 框架,你在编辑发布后部署到iis的时候 ...
- Glyphicons 字体图标
随机推荐
- 网络复习之TCP
可靠传输的工作原理 1 停止等待协议 每发送完一个分组,就停止发送,等待对方确认.出现差错,超时重传. 1.1 暂时保留已发送的分组的副本 1.2 分组和确认分组必须进行编号 ...
- Spark 1.3.0 单机安装
一.试验环境: CentOS6.6 最小化安装:主机名spark-test,IP:10.10.10.26 OpenStack虚拟云主机. 注:安装流程:进入linux->安装JDK->安装 ...
- POJ 1979 dfs和bfs两种解法
fengyun@fengyun-server:~/learn/acm/poj$ cat 1979.cpp #include<cstdio> #include<iostream&g ...
- 最小较小codeforces 2B The least round way
查了好多资料,发现还是不全,干脆自己整理吧,至少保证在我的做法正确的,以免误导读者,也是给自己做个记载吧! 求从左上角到右下角所经过的数字之积末端所含0最小的个数 终究的积可以当作A*2^x*5^y, ...
- HDU 4593 H - Robot 水题
H - RobotTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.act ...
- osg通过glsl实现一个平面的水效果(法线贴图) 【转】
转自 http://blog.sina.com.cn/s/blog_78ea87380101ehk3.html 此文实现一个简单的的水面效果,主要是法线贴图, 效果图如下: 此文分为三部分:ver ...
- [AngularJS] $http cache
By default your HTTP requests with the $https service in Angular are not cached. By setting some opt ...
- cocos2dx-3.2 环境配置
一.软件 1)VS2012(C++11特性在VS2012以上可以使用) 2)Cocos2d-x官网源码 3)JDK 4)NDK(3.2要用r9d版本,用了android-ndk-r8e报错了) 5)A ...
- Windows下用Git下载android源码 转载
http://my.oschina.net/jiadebin/blog/52631 1.首先你的电脑要安装好git,这个请参考git官网. 2.打开git命令窗口输入git clone http:// ...
- oracle_partition sample
(1.) 表空间及分区表的概念 表空间: 是一个或多个数据文件的集合,所有的数据对象都存放在指定的表空间中,但主要存放的是表,所以称作表空间. 分区表: 当表中的数据量不断增大,查询数据的速度就会变慢 ...