HTML中引入阿里Unicode图标

HTML引入阿里Unicode图标

暑假的时候刚开始使用阿里的Unicode图标，但有时候总是加载不出来，后来不知道怎么回事好了，就没有再去研究他，最近又有用到这个图标，所以又重新看了一下；我觉得大家可能会有和我一样的问题，希望会有点帮助。

下载Unicode的图标压缩包

首先我们可以去阿里巴巴矢量图标库上下载。

1.进入网站登录上自己的账号；

2.选择你想要下载的图标；
选择自己想要使用的图标然后加入到购物车

3. 代码下载 ；
点击上图中的2处的购物车，会出现下图的情况，点击下载代码即可完成下载。

4. 下载内容说明；
一般在下载后我们的文件夹会是这样的：
里面的内容为：

demo.css是我们的例子的css样式文件。下面的3个html文件是3种图标引用方式的例子和效果展示。我们一般在引用图标时是用下面的那些文件。
5. HTML中引入图标；
首先把我们下载的文件夹重命名放入和存放css样式文件的文件夹同级的目录下（这样是方便管理）
我在这里重命名为了iconfont。
然后把demo_unicode.html文件中的下面的代码拷贝到你的css文件中，

 @font-face {font-family: "iconfont";
         src: url('../iconfont/iconfont.eot'); /* IE9*/
         src: url('../iconfont/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../iconfont/iconfont.woff') format('woff'), /* chrome, firefox */
         url('../iconfont/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
         url('../iconfont/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;
       }

代码中的url内的值，一定为你从本css文件去找到上面的各.svg .ttf .woff .eot各文件的相对路径这个非常重要，很多错误都是因为这里写错了，所以引用不打那个图标如果你的文件相对位置和我的一样，可以直接复制我的代码过去。
我们在想要使用图标的位置放上这行代码：

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

i标签中间的内容根据你自己的需求去使用相对应的值即可。

此时刷新就可以看到你想用的图标啦

如果图标不能显示出来，去检查下上图中的文件是不是有缺少，检查下你的css中的路径是不是存在错误。

ps：

如果想要改变图标的大小，这里不能使用width和height，你可以用对该图标的i标签设置font-size就可以 控制图标的大小啦。（其实这些在demo里也是有 的，可以去看下）