BootStrap glyphicons 字体图标实现方法


Posted in Javascript onMay 01, 2016

相关阅读:

详解Bootstrap glyphicons字体图标

先给大家说下什么是字体图标?

字体图标是在 Web 项目中使用的图标字体。虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。

为了表示对图标作者的感谢,希望您在使用时加上 GLYPHICONS 网站的链接。

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

<span class="glyphicons glyphicon-eur"></span>

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

BootStrap 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

BootStrap glyphicons 字体图标实现方法 

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

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

明白了原理,代码就简单了,具体代码如下所示:

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>

关于小编给大家介绍的BootStrap glyphicons 字体图标实现方法到此就结束了,如果大家有任何问题欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
jquery.validate使用详解
Jun 02 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
JS实现左右无缝轮播图代码
May 01 #Javascript
JavaScript中的继承之类继承
May 01 #Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 #Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 #Javascript
js实现的万能flv网页播放器代码
Apr 30 #Javascript
js实现的下拉框二级联动效果
Apr 30 #Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 #Javascript
You might like
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
IStream与TStream之间的相互转换
2008/08/01 PHP
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
python设置值及NaN值处理方法
2018/07/03 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
对Python中画图时候的线类型详解
2019/07/07 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
opencv+python实现均值滤波
2020/02/19 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
会计毕业生自我鉴定
2013/11/04 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
优秀党员事迹材料
2014/12/18 职场文书
初中成绩单评语
2014/12/29 职场文书
Python中的tkinter库简单案例详解
2022/01/22 Python