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中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
JS中箭头函数与this的写法和理解
Jan 14 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
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 开发环境配置(Zend Studio)
2010/04/28 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python根据路径导入模块的方法
2014/09/30 Python
更改Python命令行交互提示符的方法
2015/01/14 Python
机器学习python实战之手写数字识别
2017/11/01 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
python3实现绘制二维点图
2019/12/04 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
Python列表如何更新值
2020/05/27 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
个人求职信范例
2014/01/29 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
优秀班组长事迹
2014/05/31 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
家长学校教学计划
2015/01/19 职场文书
对学校的意见和建议
2015/06/04 职场文书