Bootstrap 字体图标.pdfVIP

Bootstrap 字体图标 Bootstrap 字体图标(Glyphicons) 本章将讲解字体图标(Glyphicons) ，并通过⼀些实例了解它的使⽤。Bootstrap 捆绑了 200 多种字体格式的字形。⾸ 让我们 来理解⼀下什么是字体图标。 什么是字体图标？ 字体图标是在 Web 项⽬中使⽤的图标字体。虽然，Glyphicons Halflings 需要商业许 可，但是您可以通过基于项⽬的 Bootstrap 来免费使⽤这些图标。 为了表⽰对图标作者的感谢，希望您在使⽤时加上 GLYPHICO S ⽹站的链接。 获取字体图标 我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本，并理解了它的⽬录结构。在 f onts ⽂件夹内可以找到字体图标，它包含了下列这些⽂件： glyphicons-halflings-regular .eot glyphicons-halflings-regular .svg glyphicons-halflings-regular .ttf glyphicons-halflings-regular .woff 相关的 CSS 规则写在 dist ⽂件夹内的 css ⽂件夹内的 bootstrap .css 和 bootstrap -min .css ⽂件上。 字体图标列表 点击这⾥，查看可⽤的字体图标列表。 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) for } .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 和位置。 .glyp hicon class 声明⼀个从顶部偏移 1px 的相对位置，呈现为 inline-block ，声明字 体，规定 font-style 和 font-weight 为 normal ，设置⾏⾼为 1。除此之外，使⽤ -webkit- f ont-smoothing: antialiased 和 -moz-osx-f ont-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 下⾯的实例演⽰了如何使⽤字体图标： !DOCTYPE htmlhtmlhead titleBootstrap 实例 - 如何使⽤字体图标/title link href=/bootstrap/css/bootstrap.min.css rel=stylesheet script src=/scripts/jquery .min.js/script script src=/bootstrap