微信小程序使用iconfont图标

这篇具有很好参考价值的文章主要介绍了微信小程序使用iconfont图标。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、第一步进入iconfont网站

1.添加需要使用的图标,点击购物车图标加入项目

微信小程序使用iconfont图标

 

2.点击右上角的购物车按钮

微信小程序使用iconfont图标

 

 3.点击添加项目按钮,选择一个项目添加即可,若没有项目,可以创建

微信小程序使用iconfont图标微信小程序使用iconfont图标

 

4.添加完项目会自动跳转到下一个页面,点击font class 生成在线链接

微信小程序使用iconfont图标

 

5.复制生成的链接,去网页打开,并右键另存为

微信小程序使用iconfont图标

微信小程序使用iconfont图标

 

第二步,将生成的文件放入项目里,将文件后缀重命名为wxss

 微信小程序使用iconfont图标

 

1.在所需要使用iconfont图标的页面文件wxss下导入,

微信小程序使用iconfont图标

 

2.回到iconfont网站,点击需要使用的图标复制代码,写入js文件中使用图标的代码中

微信小程序使用iconfont图标

微信小程序使用iconfont图标

 

 3.在对应wxml文件中

通过<view class="iconfont {{item.selectedIconPath}}"></view>去使用即可,代码只是示例

<view class="tabbar-box">
  <block wx:for="{{list}}" wx:key="list">
    <view class="list-item {{currIndex==index && 'active'}}" catchtap="tabClick" data-index="{{index}}">
      <view class="iconfont {{item.iconPath}}"></view>
      <text>{{item.name}}</text>
    </view>
  </block>
  <view class="active-tabbar-box" style="--n:{{currIndex}}"></view>
</view>

微信小程序使用iconfont图标

 

 以上完成后保存即能实现啦

微信小程序使用iconfont图标文章来源地址https://www.toymoban.com/news/detail-482495.html

到了这里,关于微信小程序使用iconfont图标的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序iconfont真机渲染失败

    解决方法: 1.将下载的.woff文件在transfonter转为base64, 2.打开网站,导入文件,开启base64按钮,下载转换后的文件 3. 在下载解压后的文件夹中找到stylesheet.css,并复制其中的base64 4. 修改index.wxss文件,将url中的本地地址替换为base64

    2024年02月13日
    浏览(38)
  • 微信小程序使用阿里巴巴iconfont,报错Failed to load font http://at.alicdn.com/t/..........

    介绍 上篇文章,介绍了,在微信小程序里导入并使用阿里巴巴iconfont图标;但是在页面里使用后,可以看到后台日志有打印错误信息,具体报错如下: 分析 报这个错,是因为项目里使用了 iconfont 字体图标,但是这个链接在小程序后台没有备案在后台配置一下白名单即可。具

    2024年02月03日
    浏览(55)
  • 微信小程序使用字体图标——链接引入

    目录 1.下载字体图标  1.选择需要的图标加入购物车添加到项目 2.查看项目  3.生成在线链接   4.复制生成的链接 等下放到iconfont.json中​编辑 2.引入链接 1.下载  2.生成iconfont.json文件 3. 在iconfont.json中 放入生成的链接 4.需要重新编译小程序之后在终端执行 5.在app.json中引入字

    2024年02月16日
    浏览(227)
  • 微信小程序项目中使用icon图标

    效果: 步骤: 1、先让ui负责人把你的账号加入到项目中,加入到项目中后就可以在icon图标库中看到该项目 2、在小程序中使用 新建一个view,在上面加一个class,复制icon名字上去即可,注意格式,格式为iconfont icon名。 iconfont这个前缀不是固定的,根据icon名字来,icon的前缀为

    2024年02月11日
    浏览(60)
  • 微信小程序引入外部的CSS或iconfont

    使用外部样式的方法是: @import \\\'相对路径下的外部样式文件.wxss\\\'; iconfont作为一种特殊的CSS也逃不开这个命运,小程序的wxss文件font-face中的url不接受HTTP地址参数,但是接受base64,因此而我们可以将字体文件下载后转化为base64. 方案如下: 1、到阿里巴巴矢量图标库(iconfont-阿里

    2024年02月04日
    浏览(45)
  • 微信小程序里使用SVG矢量图标方法

    微信小程序里使用SVG矢量图标有2种引入方法: 一、SVG图标转换为BASE64编码 可以在百度搜索’svg在线转BASE64’(可能会有问题,如下) 如下方式 同时还需要添加 background-size: contain 属性使图标能根据元素大小自动缩放 二、使用运程地址引入SVG图标 把SVG图标上传到网站服务器

    2024年02月05日
    浏览(54)
  • 【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)

    优点:操作方便,支持多彩图标 缺点:会增加源代码大小 下载 svg 格式的图标图片,放入源码中使用 小程序项目中的路径为 assetsicon美食.svg 优点:不会增加源代码大小 缺点:不支持多彩图标,更新比较麻烦 将图标添加到自己的图标项目中后,生成对应的 css 链接 浏览器打

    2024年02月11日
    浏览(48)
  • 微信小程序中使用字体图标,解决字体图标包过大的问题

    在微信小程序开发中,我们经常使用字体图标来美化界面和展示各种功能。然而,当我们的小程序主包大小超过2M时,可能会遇到一个问题:字体图标的文件很大,导致整个包的大小超出了限制。为了解决这个问题,我们可以使用wx.loadFontFace方法来远程加载字体图标。 步骤一

    2024年02月12日
    浏览(84)
  • 原生微信小程序中使用-阿里字体图标-详解

    1、打开阿里巴巴矢量图标库 网址:iconfont-阿里巴巴矢量图标库 2、搜索字体图标,鼠标悬浮点击添加入库  3、按如下步骤添加到自己的项目   进入微信开发者工具 1、创建 fonts文件夹 iconfont.wxss 文件,将刚才的代码复制进去 2、在 app.wxss文件 中引入路径 3、在页面中使用  

    2024年02月04日
    浏览(63)
  • 微信小程序 使用 echarts symbol属性不能使用自定义图标

      当我想去给 symbol  属性自定义图标时,控制台就报错 Image  is not defined !!! 原因是因为微信小程序不支持  new image() ; 下列就是echarts.js 源码,版本不同格式化后显示的 function 命名有所不同。但是全局就只有这么一个 new image ;全局搜一下就好 !!! 全局定义 canvas

    2024年02月13日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包