Bootstrap 字体图标(Glyphicons)
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
什么是字体图标?
字体图标是在 Web 项目中使用的图标字体。虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。
为了表示对图标作者的感谢,希望您在使用时加上 GLYPHICONS 网站的链接。
获取字体图标
我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本,并理解了它的目录结构。在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件:
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。
所以 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";
}
用法
如需使用图标,只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。
<span class="glyphicon glyphicon-search"></span>
Bootstrap 字体图标(Glyphicons)的更多相关文章
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):带有字体图标的导航栏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-envelope
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-cloud
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-euro
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-minus
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-plus
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-asterisk
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-play-circle
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- spring cloud(Greenwich.M2) hystrix dashboard 报/actuator/hystrix.stream 404 Not Found的问题
consumer端不引用spring-boot-starter-actuator的情况 Consumer端会报Unable to connect to Command Metric Stream.新建 ...
- docker swarm:Error response from daemon: rpc error: code = Unavailable desc = grpc: the connection is unavailable
环境:cetos7 描述:创建完docker swarm,想把node主机加入swarm中,执行以下命令时,报错 无法连接! 原因是:防火墙!!!!!!!没关!!!! 解决办法是:关闭防火墙
- C#从IE缓存读取图片
如果用HttpWebRequest和HttpWebResponse从服务器取图片,会触发图片变化.于是想到从IE缓存读取图片 参考https://www.cnblogs.com/yelaiju/arc ...
- Scala主构造器参数是否升级为成员与是否有get/set
1:主构造器前面添加val/var 关键字则升级为类成员,否则只是构造器中的一个参数而已. 2:private 修饰get/set方法权限,private var/val 成员变量,则有get/set ...
- jvm的解释执行与编译执行
1.原理 字节码无法直接交给硬件执行需要虚拟机翻译成机器码才能执行,“翻译”的策略有两种:解释执行和编译执行又称即使编译(JIT).解释执行是没执行一句字节码的时候把字节码翻译成机器码并执行,优点是启 ...
- argparse模块
argparse模块是的编写用户友好的命令行接口非常容易.程序只需定义好它要求的参数,然后argparse将负责如何从sys.argv中解析出这些参数.argparse模块还会自动生成帮助和使用信息并 ...
- Visual Studio 2012 与此版本的 Windows 不兼容。有关详细信息,请联系 Microsoft
参考网址:Visual Studio 2012 与此版本的 Windows 不兼容 解决 下载更新包安装:http://www.microsoft.com/zh-CN/download/details ...
- 抛弃配置后的Spring终极教程
一:前言 Spring 有XML配置和注解两种版本,我个人非常喜欢使用注解,相当热衷Spring boot! 对于Spring,核心就是IOC容器,这个容器说白了就是把你放在里面的对象(Bean)进行 ...
- OO博客作业1:第1-3周作业总结
(1)基于度量来分析自己的程序结构 注:UML图中每个划分了的圆角矩形代表一个类或接口,箭头可代表创建.访问数据等行为.类的图形内部分为3个部分,从上到下依次是类的名称.类包含的实例变量(属性).类实 ...
- 网络编程-C/S架构
什么是C/S架构 C指的是client(客户端软件),S指的是Server(服务端软件),本章的重点就是教大家写一个C/S架构的软件,实现服务端软件与客户端软件基于网络通信. 计算机基础知识 作为应用 ...