字体图标展示的是图标,但本质是字体。它的存在是为了补充精灵图的不足之处,实际开发中简单的样式图标可以使用字体图标,复杂的还是首选精灵图。
字体图标使用步骤:
一、下载字体图标;二、字体图标的引用;三、追加新的图标。
两个比较好的网站 https://icomoon.io/ 和 https://www.iconfont.cn/。
1、下载后的压缩文件如下。
解压后将fonts放在项目的根目录下。
2、将上面压缩文件的图中的style.css打开后如下图,复制如下代码到项目中的样式中.
3、定义一个span标签,用于显示字体图标。
将上面压缩文件的图中的demo.html打开后如下图,复制想要使用的图标到span中。
完整的style中代码:
<style type="text/css"> @font-face { font-family: 'icomoon';//名字与下面统一 src: url('fonts/icomoon.eot?7uaamp'); src: url('fonts/icomoon.eot?7uaamp#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7uaamp') format('truetype'), url('fonts/icomoon.woff?7uaamp') format('woff'), url('fonts/icomoon.svg?7uaamp#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } span{ font-family:'icomoon';//名字与上面统一 font-size: 24px; color: red; } </style>
此处不知道为什么显示不出来,实际上已经复制过来。后面知道原因后在做补充说明。
效果图如下。
4、追加新的图标。
打开网址。
只需重复一下1操作即可。