登录Iconfont-阿里巴巴矢量图标库
官文地址:/
①必须登录才行,我这边是用新浪微博登录的
②然后可以搜索自己需要的图标,比如搜索homt,然后鼠标放到图标上,点购物车图标,就加入到购物车了。比如加入如下五个homt图标到购物车
③然后点击购物车,会看到刚才加的图标,到最下边,有两个按钮,【添加至项目】和【下载素材】,如果点下载素材,会将你购物车的所有图标打包下载,我们这里要用的是【添加至项目】功能。
④点击添加至项目,如果之前创建过项目,直接加入,没有自己创建一个,名字随便起
新建项目:home测试
进去长这样
⑤点击查看在线链接,点击生成,如下:
然后就会生成css
复制代码,就可以引入到我们自己的项目中,当然你也可以把css内容复制到自己项目中,防止别人删除项目或者更新内容导致样式不可用。
⑥界面引用
第一步:拷贝项目下面生成的fontclass代码:
///t/font_8d5l8fzk5b87iudi.css
第二步:挑选相应图标并获取图标名称,应用于页面:
<i class="iconfont icon-xxx"></i>
使用效果如下:
如果你后期项目更新,添加了新图标,界面就会有提示,让你重新生成
你点击更新代码即可,然后会重新生成一个地址,注意:这个地址和之前的地址不同,也就是说你项目里引用的地址也要对应改过来。不过虽然css地址也更新了,但是之前对应的地址还是有效的,可以继续使用。
小程序中引用
也上边一样的操作,访问css文件地址,把对应的css文件拷贝到微信的样式文件里边
假设我在小程序目录下新建了一个目录static/iconfont/iconfont.wxss,static目录和pages同级
一般是全局使用,所以需要将刚才建的样式导入后才能正常使用,在全局文件app.wxss引入
@import "/static/iconfont/iconfont.wxss";
然后假设我们要在index页面使用即可
<text class="iconfont icon-xxx"></text>
使用过程有问题加群一起讨论:700637673