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 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
Javascript之String对象详解
Jun 08 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 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
极典R601SW收音机
2021/03/02 无线电
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
python操作yaml说明
2020/04/08 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
电子商务应届生求职信
2013/11/16 职场文书
毕业生自荐书
2013/12/18 职场文书
十八大感想感言
2014/02/10 职场文书
企业消防安全责任书
2014/07/23 职场文书
网聊搭讪开场白
2015/05/28 职场文书
python高温预警数据获取实例
2022/07/23 Python