前端--图标处理

一、图标使用简介

　在前端界面，很多地方会使用到各种类型的图标，对图标的大小、尺寸、颜色都会有特定的要求。目前有很多开源的图标使用策略，不过大体分为两类，一类是 用代码实现的矢量图形，一类就是图片。

　矢量图形：用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看，高分辨率。

　图片：读取文件流的形式，不推荐使用

 

二、Font  Awesome

 简介：一套绝佳的图标字体库和CSS框架，提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式

 学习地址：https://www.runoob.com/font-awesome/fontawesome-tutorial.html

                  http://www.fontawesome.com.cn/get-started/

 使用：

　　方式一：下载 Font Awesome 源码，然后直接在代码里面使用

　　方式二：直接在线使用 Font Awesome 框架

<!-- 国内项目推荐 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">   

<!-- 海外项目推荐 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

 

三、iconfont  

 简介：阿里妈妈MUX倾力打造的矢量图标管理、交流平台。

　　　设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用

 说明：提供图片(PNG)和矢量图形(SVG)两种方式，选择时可以指定颜色、大小

 地址：https://www.iconfont.cn/home/index