在项目中导入字体图标iconfont

1.下载图标

        去iconfont下载想要的图标，选择需要的图标加入购物车，然后一起下载生成文件，基本免费，也可以上传自制图标。

图1.iconfont

        选择 下载代码

图2.购物车

2.查看文件

        下载后你会得到如下的压缩包。并不是所有文件都要用到，选中的3个html文件可直接浏览器打开，里面是3种使用方法，不同的方法使用不同的文件。

图3.压缩包内容

3.选择使用方法，阅读说明

        一共有fontclass，symbol，unicode三种使用方法。以symbol为例，说明文档内容如图。(另外两种只能是单色的图标)

图4.说明文档内容

        使用步骤写的都很清楚，按要求导入对应的文件就可使用了。

4.效果展示

        我用的是symbol形式使用的。
        <svg class="icon pointer" aria-hidden="true" @click="share('QQ')">
            <use xlink:href="#icon-QQ">
        </svg>

图5.试用展示

转载到其他平台需含本文的简书链接，vue技术我只在简书发布