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"
}
]
可能有说的不好的地方,如果有什么问题请留言,欢迎大家指正🤞