微信小程序中阿里iconfont使用记录

最新推荐文章于 2024-03-03 04:00:00 发布
最新推荐文章于 2024-03-03 04:00:00 发布
阅读量470 收藏
点赞数 1
分类专栏： 前端整理 文章标签： 前端 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cloud1209/article/details/105205751
版权

在弄小程序的时候，想应用几个小图标
又嫌都以图片形式放上去麻烦
就找了找有没有合适的icon
从而发现了新天地——阿里爸爸的iconfont
https://www.iconfont.cn
接下来简单记录一下我的使用和踩坑过程

PNG

首先是下了几个png图片，用来做底部tabBar
在这里插入图片描述
iconfont
可以直接将想要的图标加入库然后下载，令我感到很棒的是可以自定义颜色下载。这让我可以直接完成一套图标包括选中(active)和未选中状态。
使用方法可以参照 官网使用教程

Unicode

接着我就开始用他的icon，官方的教程是这样的

官网使用教程

过于简洁明了，像我这样的小白就会遇到问题

简单写一下我总结过的应用方法

1、现将想要的图片添加到项目，然后下载至本地

最低0.47元/天 解锁文章
云云的云
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序使用iconfont
kingAn123的博客
05-31 1900
文章目录vue项目使用iconfont一、小程序使用iconfont1. 找到创建的图标库2. 查看生成的样式文件在线链接3. 复制在线链接，直接用浏览器打开4. 小程序中引入iconfont5. 小程序使用iconfont6. 页面使用iconfont二、组件样式隔离导致iconfont无效三、在伪类选择器中使用iconfont1、iconfont作为伪类图标2、iconfont作图片缺省图 vue项目使用iconfont 使用iconfont图标样式库-CSDN 一、小程序使用iconfont 与
在微信小程序中使用iconfont
m0_46526358的博客
02-12 8774
微信小程序上使用iconfont的方法一、选取需要的icon二、在微信小程序中使用iconfont三、其他 一、选取需要的icon 1、在iconfont上选取自己所需要的图标，然后添加到库内 2、将挑选的图标添加到自定义的项目中 3、选择生成font class的代码 4、点击链接进入代码并复制全部 二、在微信小程序中使用iconfont 1、在项目下创建style文件夹，并建立所需要的wxss文件 然后在wxss文件中将在iconfont上生成的css代码全部复制进去 2、在app.wxss内引
微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标
最新发布
时光の尘的博客
03-03 3109
在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！
在微信小程序中如何引入iconfont
sayyy的专栏
10-07 2175
略
基于微信小程序实现爱卡汽车小程序源码分享
06-13
2. 开发文档：微信小程序宝典秘籍 通过这个查找微信小程序的API，组件，框架等等。 3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于...
基于微信小程序实现备忘录工具小程序源码分享
06-13
2. 开发文档：微信小程序宝典秘籍 通过这个查找微信小程序的API，组件，框架等等。 3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于...
基于微信小程序实现类似滴滴拼车小程序源码分享
06-15
2. 开发文档：微信小程序宝典秘籍 通过这个查找微信小程序的API，组件，框架等等。 3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于...
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
01-03
以上所述是小编给大家介绍的在webstorm开发微信小程序之使用阿里自定义字体图标 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
基于微信小程序实现课程预约小程序源码分享
06-15
2. 开发文档：微信小程序宝典秘籍 通过这个查找微信小程序的API，组件，框架等等。 3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于...
微信小程序中使用 iconfont 图标的四种方法
qq_43477721的博客
07-20 5922
1. 先去 iconfont 官网选择自己需要的图标，添加到项目中 点击红框 在浏览器中输入地址，得到的文件另存为 iconfont.wxss，放入项目的根目录下 打开 app.wxss @import "iconfont.wxss" 现在分两种情况，第一种是在 pages 下的 .wxml 中使用，第二种是在 components 下的 .wxml 中使用。 第一种 <text class="iconfont icon-fabu"></text> 后面的名称可以在 i
微信小程序中如何使用阿里云iconfont图标
m0_62524243的博客
08-18 688
在小程序根目录创建iconfont.wxss文件，将浏览器中的代码复制，粘贴到文件中。在项目中，点击Font class按钮，点击查看在线链接，生成css文件。在iconfont中查看图标名称（可以自定义，瑶重新生成css文件）在app.wxss文件中引入iconfont.wxss文件。创建一个项目（进入我的项目，点击创建项目）在图标库中挑选自己需要的图标，点击购车按钮。将购物车中的图标添加到自己的项目中。选好后，点击右上角购物车 按钮。将复制的url在浏览器中打开。输入相关数据，创建项目。...
微信小程序使用字体图标
热门推荐
生如夏花 炫至茶靡
07-03 8万+
项目中常常需要使用到字体图标，微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。 第一步：下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标，如这里需要一个购物车的图标，流程为： 搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮。
微信小程序引入iconfont
qq_44306615的博客
01-04 425
微信小程序使用iconfont
微信小程序引入外部的CSS或iconfont
m0_73341533的博客
01-30 2806
iconfont作为一种特殊的CSS也逃不开这个命运，小程序的wxss文件font-face中的url不接受HTTP地址参数，但是接受base64，因此而我们可以将字体文件下载后转化为base64.将下载文件目录下.css文件直接修改成.wcss文件，放置到项目目录下，在开发者工具中打开，复制下面加在文件中。将第一步中下载的文件中iconfont.css用记事板打开复制选中代码。保存文件，就可以在需要地方引入文件了，在wxml中就可以使用图标了。)寻找需要的字体图标，并下载，在压缩包中找到ttf格式文件。
微信小程序如何使用阿里字体图标（用法非常简单适用web）
June.1
04-16 1万+
生成iconfont（地址） 把你想要的图标添加到购物车。 创建当前项目名称, 将购物车的图标加入项目 这样生成项目图标素材下载到本地, 需要用到 ：1. iconfont.css 是图标样式定义；2. 红色的是字体文件 如图： 小程序应用 复制iconfont.css 文件样式到fonts.wxss中如下示例 /*fonts.wxss*/ @font-face {font-famil...
微信小程序----引入外部字体库iconfont的图标
止于至善
12-22 3万+
直接使用阿里巴巴的网络路径选择iconfont图标 官网：阿里巴巴矢量字体库 步骤：阿里巴巴字体库使用方法 全局引入app.wxss@font-face { font-family: 'iconfont'; /* project id 518032 */ src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot');
关于微信小程序中图标的引用（基于iconfont）
weixin_39370315的博客
04-23 8042
步骤如下： iconfont图标代码下载 打开我们的iconfont网址 在该网站中寻找我们需要的图标，加入购物车(注意是加入购物车哦。如图) 【加入购物车】 【查看购物车，点击下载代码】 【下载后的文件，解压】 关注解压文件 【iconfont.ttf】和【iconfont.css】 创建微信小程序样式表文件.wxss 取名为font.wxss 将【iconf...
阿里 Symbol 图标的使用
wangshan_api的博客
12-01 1178
阿里 Symbol 图标的使用步骤一：在 github 查询依赖 mini-program-iconfont-cli 包步骤二：进入 taro-iconfont-cli 库中，按照 github 中的步骤操作 图标的引用在项目开发中是一个不可避免的一个问题。然而并不是所有的项目都可以很顺利的引入图标库，例如在微信小程序开发中想要引入阿里图标库中的多色图标。而按照阿里图标库中给出的常规的引入流程就不能达到要求，总会报错。 在阿里图标库中只有 Symbol 类型的图标才支持多色 因此只有在项目中引入阿里 Sy
uniapp微信小程序怎么修改iconfont图标大小
05-16
你可以通过以下方式修改 uniapp 微信小程序中 iconfont 图标的大小： 1. 在需要使用 iconfont 的页面中，在 `style` 标签内设置 `font...通过以上步骤，你就可以在 uniapp 微信小程序中使用 iconfont 并修改其大小了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值