黑马程序员技术交流社区

标题: 【上海校区】字体图标的制作和使用 [打印本页]

作者: 战行者    时间: 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