在微信小程序中如何使用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"

      }

]

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。