学习实现bootstrap glyphicons字体

Posted 2020-08-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习实现bootstrap glyphicons字体相关的知识，希望对你有一定的参考价值。

今天给大家分享一个bootstrap学习教程。我使用bootstrap很久了，内置的 glyphicons 图标，足以满足小型项目的需求。只需要使用一个样式，即可调出图标。虽然感觉很神奇，一直没有分析他是怎么实现的，通过Chrome 开发者工具，定位到对应的elment 后，得知他是使用的 CSS 伪元素技术。

1	<span class="glyphicons glyphicon-eur"></span>

.glyphicons 定义了所有 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

.glyphicon-eur:before, .glyphicon-euro:before{

content: "\\20ac";

}

查阅文档，发现除了:before（CSS2实现：在元素之前添加内容），还有:first-letter（CSS1实现，向文本的第一个字母添加特殊样式，display设置为block时有效）、:first-line（CSS1实现，向文本的首行添加特殊样式，display设置为block时有效）、:after（CSS2实现：在元素之后添加内容）。

明白了原理，代码就简单了。写的例子如下（演示地址：

http://www.miaoqiyuan.cn/products/bootstrap-glyphicons/）：

<!doctype html>

<head>

<title>DEMO of miaoqiyuan.cn</title>

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>