字体图标下载及使用(详解)

目录

字体图标概述:

下载与使用

---

字体图标概述:

目标:

使用字体图标技巧实现网页中简洁的图标效果

本质:

字体图标展示的是图标,本质是字体

处理一些简单的，颜色单一的图片

优点;

• 灵活性:灵活的修改样式,例如:尺寸,颜色等
• 轻量级:体积小,渲染快,降低服务器请求次数
• 兼容性:几乎兼容所有主流浏览器
• 使用方便:

①下载字体包

②使用字体图标

下载与使用

字体图标库:

Iconfont:  https://www.iconfont.cn

使用字体图标-类名:

• 引入字体图标样式表

  <link rel="stylesheet" href="iconfont.css"> 

• 调用图标对应的类名，必须调用2个类名

iconfont类：基本样式，包含字体的使用等
icon-xxx：图标对应的类名

<i class="iconfont icon-arrow-right"></i>

<i class="iconfont icon-arrow-up"></i>

补充:

如果图标库中没有项目所需要的图标怎么办?

解决办法:IconFont网站上传矢量图生成字体图标

• 与设计师沟通,等到SVG矢量图
• IconFont网站上传图标,下载使用

上传步骤:

①上传-->上传SVG图标

②浏览本地图标-->去除颜色提交(字体图标改变颜色较为方便,建议去除颜色)

③加入购物车-->下载使用