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 常用函数
Dec 30 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
Node.js学习入门
Jan 03 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 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
PHP4实际应用经验篇(8)
2006/10/09 PHP
php 图片上传类代码
2009/07/17 PHP
apache+php+mysql安装配置方法小结
2010/08/01 PHP
解析strtr函数的效率问题
2013/06/26 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
大四学年自我鉴定
2013/11/13 职场文书
信息管理员岗位职责
2013/12/01 职场文书
心理健康教育心得体会
2013/12/29 职场文书
关于赌博的检讨书
2014/01/08 职场文书
军训个人总结
2015/03/03 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技