bootstrapglyphicons字体实现方法_html/css_WEB-ITnose

来源：动视网责编：小采时间：2020-11-27 16:26:37

bootstrapglyphicons字体实现方法_html/css_WEB-ITnose

bootstrapglyphicons字体实现方法_html/css_WEB-ITnose:使用bootstrap很久了，内置的 glyphicons 图标，足以满足小型项目的需求。只需要使用一个样式，即可调出图标。虽然感觉很神奇，一直没有分析他是怎么实现的，通过Chrome 开发者工具，定位到对应的elment 后，得知他是使用的 CSS 伪元素技术。

推荐度：

点击下载本文 文档为doc格式

导读bootstrapglyphicons字体实现方法_html/css_WEB-ITnose:使用bootstrap很久了，内置的 glyphicons 图标，足以满足小型项目的需求。只需要使用一个样式，即可调出图标。虽然感觉很神奇，一直没有分析他是怎么实现的，通过Chrome 开发者工具，定位到对应的elment 后，得知他是使用的 CSS 伪元素技术。

使用bootstrap很久了，内置的 glyphicons 图标，足以满足小型项目的需求。只需要使用一个样式，即可调出图标。虽然感觉很神奇，一直没有分析他是怎么实现的，通过Chrome 开发者工具，定位到对应的elment 后，得知他是使用的 CSS 伪元素技术。

.glyphicons 定义了所有 glyphicons 图标字体的样式

.glyphicons{ position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing:}

显示的内容由另一个类定义的子类定义，比如：glyphicon-eur:before

.glyphicon-eur:before, .glyphicon-euro:before{ content: "\20ac";}

查阅文档，发现除了:before（CSS2实现：在元素之前添加内容），还有:first-letter（CSS1实现，向文本的第一个字母添加特殊样式，display设置为block时有效）、:first-line（CSS1实现，向文本的首行添加特殊样式，display设置为block时有效）、:after（CSS2实现：在元素之后添加内容）。

明白了原理，代码就简单了。写的例子如下（演示地址： http://www.miaoqiyuan.cn/products/bootstrap-glyphicons/ ）：

DEMO of miaoqiyuan.cn 测试页面，说明清参考：bootstrap glyphicons 字体实现方法
  http://www.miaoqiyuan.cn/
  mqycn2 
 77068320 1301425789 
 mqycn2

bootstrapglyphicons字体实现方法_html/css_WEB-ITnose

推荐度：

点击下载本文 文档为doc格式

标签：字体 it html

热门焦点

bootstrapglyphicons字体实现方法_html/css_WEB-ITnose

bootstrapglyphicons字体实现方法_html/css_WEB-ITnose

测试页面，说明清参考：bootstrap glyphicons 字体实现方法

bootstrapglyphicons字体实现方法_html/css_WEB-ITnose

最新推荐

猜你喜欢

热门推荐