在微信小程序中如何使用iconfont字体图标

iconfont 有三种用法，目前先讲fontclass的用法，后续有机会再补充

第一步：百度搜索iconfont，进入到阿里巴巴图标库，搜索自己需要的图标，加入购物车

第二步：点击购物车，下面有一个添加至项目

第三步：没有项目，就新建一个，点击图标新建，输入项目名字，然后进入到你新建的项目

第四步：然后看到这个页面，把下图中的这个路径“//at.alicdn.com/t/font_1821948_2a9iivzfzyf.css”在浏览器打开，你会看到密密麻麻很多数据，这个是我的数据哈，你们的需要选自己的图标，生成自己的数据。

第六步：把这些数据全部复制，在小程序style新建一个文件夹iconfont，在文件夹里面新建一个iconfont.wxss文件，把复制的数据粘贴到iconfont.wxss里面就可以了。

第七步：在小程序项目下app.wxss文件中引入iconfont.css文件，代码也贴上。

@import "style/iconfont/iconfont.wxss";

最后就可以使用了，在index.html里面使用，贴代码

<view class="iconfont icon-shouye"></view>

前面的这个iconfont都是一样的，icon-shouye这个是图标的名字，想用哪个就写哪个图标的名字。

这个是在index.html 的用法，如果想要在tabbar使用，需要下载

下载的图片放在images，这样引用就可以使用了

"list": [

      {

        "pagePath": "pages/index/index",

        "text": "首页",

        "iconPath":"images/tabbar/index.png",

        "selectedIconPath":"images/tabbar/index_selected.png"

      }

]

可能有说的不好的地方，如果有什么问题请留言，欢迎大家指正🤞