• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > 手把手教你怎么在小程序中使用字体图标

手把手教你怎么在小程序中使用字体图标

作者:站长图库 字体:[增加 减小] 来源:互联网

站长图库向大家介绍了小程序图标,字体图标等相关知识,希望对您有所帮助

小程序中怎么使用字体图标?下面本篇文章就以某里巴巴矢量图标为例,给大家介绍一下在小程序中使用字体图标的方法,希望对大家有所帮助!


手把手教你怎么在小程序中使用字体图标


在微信小程序开发过程中,图标的使用是很常见很普遍的。一般情况下,在微信小程序项目的文件目录里面images里面,可以直接引用本地的图标文件,但是通过使用字体图标或者background设置背景图的时候,就不用引用本地图标文件,只能使用根据URL链接地址的字体或者图片,再或者使用base64把普通图标编码之后的格式。

那么本篇博文就来分享一下微信小程序项目中怎么使用字体图标,以及把字体的URL转化成base64的格式之后再使用的方法。本案例以某里巴巴矢量图标库来举例子,具体操作如下所示。


操作步骤

1、首先打开某里巴巴矢量图标库的官网,然后搜索查找想要的图标,然后单击选择“添加入库”按钮;


手把手教你怎么在小程序中使用字体图标


2、去购物车找到添加进入的字体,然后单击选择,选择底部菜单栏里面的”添加至项目“按钮;


手把手教你怎么在小程序中使用字体图标


3、点击右上角”+“按钮,然后输入项目名称,点击”确定“按钮;


手把手教你怎么在小程序中使用字体图标


4、然后去新建的项目中找到添加的字体,然后单击选中,点击”下载至本地“按钮,即可下载到电脑本地;


手把手教你怎么在小程序中使用字体图标

5、找到下载到电脑本地的字体文件,然后打开该文件,打开里面的iconfont.css文件,然后直接复制里面的url和iconfont方法,所有的样式,直接粘贴到需要使用字体图标的wxss文件中;


手把手教你怎么在小程序中使用字体图标


6、最后在使用字体图标的wxml文件中调用一下,即可。


手把手教你怎么在小程序中使用字体图标


最后

以上案例是按照某里巴巴矢量图标库来做例子讲解的,有好多种字体图标转化的网站平台,所以其他平台就不再一一介绍,感兴趣的开发者可以去了解其他平台的使用方法。这就是本文关于在微信小程序开发的时候使用字体图标的方法,分享给有需要的人,这里不再赘述。


分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 手把手教你怎么在小程序中使用字体图标

相关文章

  • 帝国CMS批量提取正文内容到简介
  • WordPress 彻底移除后台“隐私”设置功能
  • Oracle怎么将日期转为字符串
  • 手把手教你在微信小程序中使用canvas绘制天气折线图(附代码)
  • 什么是事件循环?详解Node.js中的事件循环
  • Phpcms V9广告位循环数据调用方法详解
  • 织梦DEDECMS无简略标题显示完整标题的实现代码
  • 利用v-viewer结合vue 预览相册
  • 帝国CMS整站源码搭建教程/帝国CMS数据恢复教程
  • PHPcms v9安全教程:修改phpcms根目录下的phpcms目录名称

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • PHP如何重定向?浅谈跳转页面的3种方法
    • 电商网站站内结构SEO优化技巧
    • 解析ThinkPHP5之 _initialize() 初始化方法
    • Photoshop制作颓废的彩色立体字
    • 使用bootstrap怎么实现分页
    • 利用IF判断自定义Phpcms V9列表的图文并茂
    • 优化的实质是什么?
    • 屏蔽无用的WordPress默认小工具
    • 浅谈Nodejs中的callback回调
    • Photoshop制作精致的橙色石纹立体字

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有