微信小程序使用阿里巴巴iconfont字体图标

简介: 打开阿里巴巴iconfont官网(http://www.iconfont.cn/);把用到的字体图标加到项目里面;进入到项目里面,选择font class方式来使用,如果没有生成过代码的同学点生成,已经有代码的直接复制代码;iconfont.pngiconfont.png4.浏览器新建页面,把复制的代码粘贴到地址栏,回车。
  1. 打开阿里巴巴iconfont官网(http://www.iconfont.cn/);

  2. 把用到的字体图标加到项目里面;

  3. 进入到项目里面,选择font class方式来使用,如果没有生成过代码的同学点生成,已经有代码的直接复制代码;
    img_ba38e00aebbb0514ab37430e3bdc3514.png
    iconfont.png
    img_860595ee1c0a8066c3456e796e09d170.png
    iconfont.png

4.浏览器新建页面,把复制的代码粘贴到地址栏,回车。然后全选页面的内容,复制;
img_0d7be31e99985de0ab6b8bead9a91593.png
image.png

5.把复制的页面内容粘贴到项目的app.wxss文件(粘贴到app.wxss,项目里的每个页面都能使用,如果只是某一个页面用到的话,也可以粘贴到对应页面的wxss文件);
img_49c2205afa4e7cd4f75eb3376599e227.png
image.png

6.使用某个字体图标。把鼠标悬浮到要使用的字体图标上面,然后点复制代码,或者直接复制字体图标的类名(没留意过叫什么,应该是叫类名吧)。然后到项目要使用字体图标页面的wxml,用个微信小程序支持的行内标签(我用的是<i>),把类名粘贴上去就OK啦!

<view>
    <i class="iconfont icon-feiji2" style="font-size: 100px; color: red;" />
    <text>我是字体图标,飞机</text>
</view>
img_9958ce1e50a6fbfe02f2115d7cb7d16a.png
image.png
img_c8dac8893bf34f6256d4295f38674409.png
iconfont
  1. 效果图
    img_ab2585eafa9f5b24cb525b9edb750927.png
    image.png
好啦,本宝宝要去撸代码去啦!!!
目录
相关文章
|
6月前
|
小程序 前端开发
微信小程序 添加 IconFont
微信小程序 添加 IconFont
180 0
|
小程序
微信小程序:引入阿里巴巴矢量图标库iconfont
微信小程序:引入阿里巴巴矢量图标库iconfont
1005 0
|
小程序 安全
微信小程序离线引入 iconfont 字体图标
微信小程序离线引入 iconfont 字体图标
693 0
|
小程序 程序员 开发者
微信小程序开发:使用字体图标的方法
在微信小程序开发过程中,图标的使用是很常见很普遍的。一般情况下,在微信小程序项目的文件目录里面images里面,可以直接引用本地的图标文件,但是通过使用字体图标或者background设置背景图的时候,就不用引用本地图标文件,只能使用根据URL链接地址的字体或者图片,再或者使用base64把普通图标编码之后的格式。
855 0
微信小程序开发:使用字体图标的方法
|
小程序 前端开发
微信小程序开发引用iconfont字体图标
微信小程序开发引用iconfont字体图标
257 0
微信小程序开发引用iconfont字体图标
|
小程序 开发者 Serverless
阿里巴巴小程序繁星计划战“疫”助力在行动
阿里巴巴小程序繁星计划将提供战“疫”助力,帮助在疫情期间同心战“疫”的开发者、商家,一起早日迎来春暖花开、战胜疫情的那一天!
10025 2
阿里巴巴小程序繁星计划战“疫”助力在行动
|
小程序 Serverless
阿里巴巴小程序繁星计划活动补贴申领流程
阿里巴巴小程序繁星计划补贴活动正式开启,使用阿里云开发支付宝小程序,新增小程序首月活>=100,即可获得100元阿里云无门槛代金券。
3285 1
阿里巴巴小程序繁星计划活动补贴申领流程
|
小程序
刚刚,阿里巴巴小程序生态联盟重磅启动
9月27日下午,阿里巴巴小程序繁星计划峰会作为杭州云栖大会的压轴好戏,在云栖小镇国际会展中心迎来千余位商家、合作伙伴、个人开发者和行业专家
1750 0
|
小程序
“小程序,大生态”:云栖大会阿里巴巴小程序生态联盟成立
9月27日下午,阿里巴巴小程序繁星计划峰会作为杭州云栖大会的压轴好戏,在云栖小镇国际会展中心迎来千余位商家、合作伙伴、个人开发者和行业专家。峰会以“小程序、大生态”为题,发布了阿里巴巴小程序繁星计划补贴的更多细节方案,并宣告阿里巴巴小程序生态联盟正式成立。
3395 0
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
226 3

热门文章

最新文章

下一篇
无影云桌面