vue前端项目引入iconfont阿里图标的四种方式

一、首先登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中

http://www.iconfont.cn/home/index

二、阿里云图标的四种方式（推荐第二种方式Font class引入，如果不考虑网络问题可以用在线引入的方式）

进入项目以后会看到阿里云可以选择三种方式进行导入图标

（1）unicode

unicode的主要的特点是

优势

①兼容性最好，支持ie6+

②支持按字体的方式去动态调整图标大小，颜色等等

劣势

①不支持多色图标

②在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响，而且这种影响调整起来较为困难

使用方法：
第一步：在自定义的全局样式表中引入自定义字体 `font-face，并定义使用iconfont的样式

@font-face {
    font-family: "iconfont";
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome, firefox */
    url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
  }
  .iconfont {
    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }

第二步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#xe604;</i>

（2） Font class（推荐的方式）

与unicode使用方式相比，具有如下特点：

①兼容性良好，支持ie8+

②相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。

第二，进入项目以后 选择 Font class 并下载到本地

 

下载到本地，解压以后的文件夹列表如下：

 

第三，把红框中的部分 粘贴到 自己的项目中，记得放在 static（或assects目录）文件目录下，因为字体图标也属于静态资源的一部分。

第四，在main.js文件内全局引入 阿里云字体图标 css,记得使用 路径要正确，如果此时编译不正确，说明 引用路径存在问题

为避免出现图标方框的情况，请对font进行初始化

在reset.css 或者全局index.css中加入如下代码

// 阿里字体图标设置
.icon, .iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

第五，项目中使用字体图标，就可以使用了

 

(3)Symbol  SVG图片格式

①支持多色图标了，不再受单色限制。

②支持像字体那样通过font-size,color来调整样式。

③支持 ie9+

④可利用CSS实现动画。

⑤减少HTTP请求。

⑥矢量，缩放不失真

⑦可以很精细的控制SVG图标的每一部分

使用方法：
第一步：拷贝下载项目，复制inconfont.js到资源文件目录下，并引入inonfont.js文件

引入 ./iconfont.js

第二步：加入通用css代码（引入一次就行）：

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

(4)在线引入iconfont

在线引入iconfont 图标可参考：

 https://www.jianshu.com/p/8379597e3f97