iconfont的三种引用方法

Hi，guys！

虽然我好像不写VUE就没啥人看了，本来也没什么人看 但我还是不写VUE，hhhh
今天我们来看看iconfont的三种引入方法
首先我们先挑一个要用到的图片，添加图库

然后右上角的小车里就会有了你添加的东西

再把它添加进你的项目里

我们可以看到，下面有Unicode，Font class，Symbol三种方法，先记得更新下面的代码

第一种 Unicode

我们先用的一种，将他给的font-face全部复制到页面的样式中

<style>
    @font-face {
        font-family: 'iconfont';
        /* project id 2049718 */
        src: url('//at.alicdn.com/t/font_2049718_47ej3qenijt.eot');
        src: url('//at.alicdn.com/t/font_2049718_47ej3qenijt.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_2049718_47ej3qenijt.woff2') format('woff2'),
        url('//at.alicdn.com/t/font_2049718_47ej3qenijt.woff') format('woff'),
        url('//at.alicdn.com/t/font_2049718_47ej3qenijt.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_2049718_47ej3qenijt.svg#iconfont') format('svg');
    }
</style>

然后在html的body中写上

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

i标签中间的内容就是库中图片下面的内容

再给他加一个样式

.iconfont{
    font-family:"iconfont";
}

这时我们的页面上就已经出现啦

class可以添加但类名iconfont可不能改，不然就没啦

第二种 Font class

这种是我最喜欢用的方法
我们先把他给的这个代码用link引用，我们可以看到，他的后缀是css，也就是说他是个样式

然后在body中写

<i class="iconfont icon-weixin"></i>

类名iconfont一定要写，后面跟着的另一个类名就是图片下面给的

他就出来啦，是不是比第一种方便多了

第三种 Symbol

先用srcipt标签引入他给的js

    <script src="//at.alicdn.com/t/font_2049718_47ej3qenijt.js"></script>

然后body中写入

<svg>
    <use xlink:href="#icon-weixin"></use>
</svg>

没错，xlink:href里的也是图片下给的

嘿嘿，他又出来了，不过这个不设置样式的话比前面两个要大。
总的看还是第二种方法简单些。

好的，下课。