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 相关文章推荐
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
基于Angularjs实现分页功能
May 30 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
vue自定义filters过滤器
Apr 26 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
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
node.js实现端口转发
2016/04/14 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
vue组件的写法汇总
2018/04/12 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
JS实现多选框的操作
2020/06/24 Javascript
python模块之re正则表达式详解
2017/02/03 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
详解python eval函数的妙用
2017/11/16 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
市级文明单位申报材料
2014/05/07 职场文书
2015年企业新年寄语
2014/12/08 职场文书
无房证明样本
2015/06/17 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
56句经典英文座右铭
2019/08/09 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
JavaScript前端面试组合函数
2022/06/21 Javascript