阿里图标的引入方式

平时做项目肯定少不了图标，一些组件自带一些图标，但是可能没有我们需要的，这时候就要借助于强大的阿里图标了。怎么使用呢？

一、font-class方式

1.输入想要搜索的图标名搜索(要先登录账号)

2.将图标加入购物车

3.点击购物车，将图标加入项目，可以新建项目，也可以选择原有的项目

4.加入到项目后，会自动跳转到项目里，展示此项目里所有的图标

5.选择Font class,然后点击更新代码

6.代码更新完毕后会生成一个链接，将链接复制到浏览器地址栏，复制所有代码

7.在项目src/assets下新建一个iconfont.css文件，将复制好的代码粘贴到此文件

8.在main.js里引入iconfont.css文件

import '../src/assets/css/iconfont.css'

9.现在就可以在需要的地方使用了

// 普通使用方式, iconfont 是你项目下的 font-family, my-icon-xxx 是图标类名
<span class="iconfont my-icon-xxx"></span>

注意事项：
a.可根据自己使用的组件，按照组件自有方式引入图标，比如vant,
b.必须加上class="iconfont" class-prefix="my-icon" 其中my-icon前缀是自己设置的，可以在项目里设置，以便和使用的前端UI自带的前缀区分

<van-icon class="iconfont" class-prefix="my-icon" name="shouye" size="0.5rem"></van-icon>

name是图标名字，可以在iconfont.css里找到。

好了，这就是阿里图标的使用方式之一，当然还有其它方式，有时间再更新。

重要更新
IE浏览器上可能会不显示。
解决方法：将字体文件下载到本地，引用路径修改为本地的

————————————-更新—————————————

二、Unicode方式

Unicode 是字体在网页端最原始的应用方式，特点是：

• 兼容性最好，支持IE6+，及所有现代浏览器。
• 支持按字体的方式去动态调整图标大小，颜色等等。
• 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

1.在项目中拷贝生成的@font-face

// 示例
@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}

2.定义使用 iconfont 的样式

// 示例
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

3.挑选相应图标并获取字体编码，应用于页面

<span class="iconfont">&#x33;</span>
<i class="iconfont">&#xe724;</i>

三、查看官方使用教程

1.打开项目，点击下载至本地

2.解压文件，得到如下图所示文件

3.打开demo_index.html,里面有图标的三种使用方式

转载：https://github.com/limchen233/Front-Web/