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 相关文章推荐
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
js动态拼接正则表达式的两种方法
Mar 04 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
Element-UI+Vue模式使用总结
Jan 02 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版(2)
2006/10/09 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
在Django的session中使用User对象的方法
2015/07/23 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
python爬取招聘要求等信息实例
2020/11/20 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
入党申请人的自我鉴定
2013/12/01 职场文书
毕业自荐书
2013/12/09 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
大学新生入学教育方案
2014/05/16 职场文书
中职生自荐信范文
2014/06/15 职场文书