这篇文章将为大家详细讲解有关CSS中图标字体IconFont有哪些作用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标。
网站上经常会用到各种图标,之前网页上使用图标主要采用精灵图(背景位置+背景缩放)来实现,但是这样使用起来有许多不便之处,一方面缩放处理起来比较麻烦,一方面如果要改动一些图标就需要去找到设计人员重新设计,然后重新添加,这个过程非常不友好。
图标字体可以非常便捷的去解决以上问题,使用起来也非常简单,因为他是字体,所以可以当成字体来引用,只需要给出对应的字符而不需要通过测量背景图片位置那么麻烦。并且改变图标大小只需要改变字体大小就可以了。这里有两个网站推荐:(1),阿里巴巴矢量图标库http://iconfont.cn/(2) IcoMoon的https://icomoon。io/
下面给出IcoMoon具体使用方法
1,打开IcoMoon网站,点击IconMoon应用。
,@font-face {
,,,,,,,,,,,字体类型:,& # 39;icomoon& # 39;;/*声明字体名称,可自行设置,应用的时候对应即可*/,,,,,,,,,,,src:, url(& # 39;字体/icomoon.eot ? lep7lm& # 39;);
,,,,,,,,,,,src:, url(& # 39;字体/icomoon.eot ? lep7lm # iefix& # 39;),格式(& # 39;embedded-opentype& # 39;),
,,,,,,,,,,,,,,,,url(& # 39;字体/icomoon.ttf ? lep7lm& # 39;),格式(& # 39;truetype # 39;),
,,,,,,,,,,,,,,,,url(& # 39;字体/icomoon.woff ? lep7lm& # 39;),格式(& # 39;woff # 39;),
,,,,,,,,,,,,,,,,url(& # 39;字体/icomoon.svg ? lep7lm # icomoon& # 39;),格式(& # 39;svg # 39;);
,,,,,,,,,,,粗细:,正常;
,,,,,,,,,,,字体样式:,正常;
,,,,,,,}
(2),使用字体
(3),具体显示对应图标
,直接使用(很方便,但是一般不要使用,因为光看小方块分辨不出这些图标有什么区别),例如
跨度标签中间的小方块不是真的方块,而是对应演示页面中每个图标下面对应右侧的方块。
,,,,,,,,,,,,& lt; li> & lt; span 类=癷con-home"在在这前面有一个家里图标& lt;/span> & lt;/li>
,,,,,,,,,,,& lt; li> & lt; span 类=癷con-smile2"在在这前面有一个smile2图标& lt;/span> & lt;/li>
,,,,,,,,,,,& lt; li> & lt; span 类=癷con-tongue2"在在这前面有一个tongue2图标& lt;/span> & lt;/li>
,,,,,,,,,,,& lt; li> & lt; span 类=癷con-sad2"在在这前面有一个sad2图标& lt;/span> & lt;/li>
,,,,,,,,,,,& lt; li> & lt; span 类=癷con-wink"在在这前面有一个眨眼图标& lt;/span> & lt;/li>
对应的css代码为
