黑马程序员技术交流社区
标题: 【上海校区】字体图标的制作和使用 [打印本页]
作者: 战行者 时间: 2018-9-25 18:04
标题: 【上海校区】字体图标的制作和使用
本帖最后由 战行者 于 2018-9-25 18:08 编辑
网站中有很多图标,一般人的选择是使用图片,但是每张图片会对服务器进行一次请求,容易加大服务器的负荷,若使用精灵图的话,又会加大html图片资源的内存,弊端同样很明显,所以在网站制作中,对于这些小图标最好是使用字体图标(也就是将图标作为字体使用)。
设计师制作字体图标很耗费时间并且不可能罗列所有图标,所以一般情况都是使用第三方提供的图标库。有很多开源的图标库,例如:Font Awesome和阿里巴巴的字体图标,最常用的是阿里巴巴的。
使用步骤:
1.将需要的图标添加入库
2.将添加入库的图标加入项目
3.下载至本地
4.引入核心css文件
<link rel="stylesheet" href="font/iconfont.css" /><!-- 引入核心css文件 -->
5.在标签中加类名即可
<i class="iconfont icon-gouwuchekong"></i><!-- 在标签中添加类名,任意标签都可以 -->
[attach]251670[/attach]
作者: 不二晨 时间: 2018-9-26 09:28
作者: 梦缠绕的时候 时间: 2018-9-27 14:38
作者: 小影姐姐 时间: 2018-9-27 17:38
毕业后找到自己理想的工作
作者: 魔都黑马少年梦 时间: 2018-10-25 14:24
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |