BootStrap glyphicons 字体图标实现方法

网友投稿 193 2023-07-18


BootStrap glyphicons 字体图标实现方法

相关阅读:

详解Bootstrap glyphicons字体图标

先给大家说下什么是字体图标?

字体图标是在 Web 项目中使用的图标字体。虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。

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

.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实现:在元素之后添加内容)。

明白了原理,代码就简单了,具体代码如下所示:

关于给大家介绍的BootStrap glyphicons 字体图标实现方法到此就结束了,如果大家有任何问题欢迎给我留言,会及时回复大家的!


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Bootstrap进度条组件知识详解
下一篇:JAVA多线程之中断机制stop()、interrupted()、isInterrupted()
相关文章

 发表评论

暂时没有评论,来抢沙发吧~