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.cssbootstrap-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)的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):带有字体图标的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-envelope

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-cloud

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-euro

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-minus

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-plus

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-asterisk

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-play-circle

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. 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.新建 ...

  2. docker swarm:Error response from daemon: rpc error: code = Unavailable desc = grpc: the connection is unavailable

    环境:cetos7 描述:创建完docker swarm,想把node主机加入swarm中,执行以下命令时,报错 无法连接! 原因是:防火墙!!!!!!!没关!!!! 解决办法是:关闭防火墙

  3. C#从IE缓存读取图片

    如果用HttpWebRequest和HttpWebResponse从服务器取图片,会触发图片变化.于是想到从IE缓存读取图片 参考https://www.cnblogs.com/yelaiju/arc ...

  4. Scala主构造器参数是否升级为成员与是否有get/set

    1:主构造器前面添加val/var 关键字则升级为类成员,否则只是构造器中的一个参数而已. 2:private 修饰get/set方法权限,private var/val 成员变量,则有get/set ...

  5. jvm的解释执行与编译执行

    1.原理 字节码无法直接交给硬件执行需要虚拟机翻译成机器码才能执行,“翻译”的策略有两种:解释执行和编译执行又称即使编译(JIT).解释执行是没执行一句字节码的时候把字节码翻译成机器码并执行,优点是启 ...

  6. argparse模块

    argparse模块是的编写用户友好的命令行接口非常容易.程序只需定义好它要求的参数,然后argparse将负责如何从sys.argv中解析出这些参数.argparse模块还会自动生成帮助和使用信息并 ...

  7. Visual Studio 2012 与此版本的 Windows 不兼容。有关详细信息,请联系 Microsoft

    参考网址:Visual Studio 2012 与此版本的 Windows 不兼容 解决 下载更新包安装:http://www.microsoft.com/zh-CN/download/details ...

  8. 抛弃配置后的Spring终极教程

    一:前言 Spring 有XML配置和注解两种版本,我个人非常喜欢使用注解,相当热衷Spring boot! 对于Spring,核心就是IOC容器,这个容器说白了就是把你放在里面的对象(Bean)进行 ...

  9. OO博客作业1:第1-3周作业总结

    (1)基于度量来分析自己的程序结构 注:UML图中每个划分了的圆角矩形代表一个类或接口,箭头可代表创建.访问数据等行为.类的图形内部分为3个部分,从上到下依次是类的名称.类包含的实例变量(属性).类实 ...

  10. 网络编程-C/S架构

    什么是C/S架构 C指的是client(客户端软件),S指的是Server(服务端软件),本章的重点就是教大家写一个C/S架构的软件,实现服务端软件与客户端软件基于网络通信. 计算机基础知识 作为应用 ...