Heim >Web-Frontend >HTML-Tutorial >bootstrap glyphicons 字体实现方法_html/css_WEB-ITnose
bootstrap glyphicons 字体实现方法_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:19:151217Durchsuche
使用bootstrap很久了，内置的 glyphicons 图标，足以满足 小型项目的需求。只需要使用一个样式，即可调出图标。虽然感觉很神奇，一直没有分析他是怎么实现的，通过Chrome 开发者工具，定位到 对应的elment 后，得知他是使用的 CSS 伪元素技术。
<span class="glyphicons glyphicon-eur"></span>
.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/ ）：
<!doctype html><head lang="zh-CN"><head><meta charset="GB2312"><title>DEMO of miaoqiyuan.cn</title><style type="text/css">body{background:#CCC;font-family:'Microsoft Yahei';}.container{background:#FFF;width:800px;margin:50px auto;border:solid 1px #0096D7;border-radius:10px;}.container h2{font-size:16px;font-width:200;color:#FFF;background:#0096D7;margin:0;padding:5px 15px;}.container h2 a{color:#FFF;}.container ul{list-style:none;padding:0;margin:0;}ul.me{padding:5px;}ul.me li{margin:5px 10px;background:#EEE;height:40px;line-height:40px;text-indent:5px;border:solid 1px #DDD;border-radius:10px;}.font-icon:before,.font-icon:after{font-family:'Impact';font-size:16px;color:#0096D7;padding:4px 6px;background:#CDF;border:solid 1px #0096D7;border-radius:10px;margin-right:5px;}/* 伪元素对 元素样式没有影响 */.font-icon{color:#090;font-family:'Airal';}.web:before{content:'Home';}.qq:before{content:'QQ';}.wechat:before{content:'WeChat';color:#090;border-color:#090;background:#99F760;}.chat:before{color:#C00;}h2:first-letter{font-size:20px;color:#C00;}.chat:after{content:'ChatMe!';background:#FDC;color:#D76900;border-color:#D76900;margin-left:5px;}</style></head><body><div class="container"> <h2>测试页面，说明清参考：<a href="http://www.miaoqiyuan.cn/p/bootstrap-glyphicons-font-how-to-achieve/">bootstrap glyphicons 字体实现方法</a></h2> <div> <ul class="me"> <!-- glyphicons 方式 --> <li><span class="font-icon web"></span> http://www.miaoqiyuan.cn/</li> <!-- 放入内部的效果 --> <li><span class="font-icon wechat"></span> mqycn2 </li> <!-- glyphicons 方式 前后放置 --> <li><span class="font-icon qq">77068320 1301425789 </span> <span class="font-icon chat"></span></li> <!-- 放入内部的效果，样式叠加，和普通样式一样，后设置的也会把前设置的覆盖掉 --> <li><span class="font-icon wechat chat">mqycn2</span></li> </ul> </div></div></body></html> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：J2EE如何生成验证码图片和点击刷新验证码_html/css_WEB-ITnoseNächster Artikel：10个值得前端收藏的CSS3动效库（工具）_html/css_WEB-ITnose