在微信小程序中如何引入iconfont

已于 2022-05-06 12:12:42 修改
阅读量2.4k 收藏 8
点赞数 2
分类专栏： 微信小程序开发 文章标签： 微信小程序 小程序 xml
于 2022-05-04 08:38:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45667304/article/details/124565349
版权

在微信小程序如何引用iconfont？

1.首先进入iconfont 选择自己喜欢的图标

iconfont-阿里巴巴矢量图标库

2.选择自己喜欢的图标加入购物车

比如

3.将图标添加至项目（如果没有项目就随便新建一个项目）

在这里插入图片描述

4.打开个人主页

在这里插入图片描述

找到自己的项目，点击 Font class

在这里插入图片描述

5.复制链接

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o2jgq7IJ-1651624338120)(https://s3-us-west-2.amazonaws.com/secure.notion-static.com/73225bd1-73d8-4cc9-8374-fbc649bdef57/Untitled.png)]

跳转到代码页面，由于我们的图标是在所以我们要将链接的后缀.css改成.wxss。复制全部代码

在微信小程序文件夹中，有一个style文件夹，新建一个文件iconfont.wxss然后将代码粘贴在此

因为要用这个图标文件所以在app.wxss文件中写下

@import "./styles/iconfont.wxss”

例子：

假设我们要在index页面引用一个图标，所以在index.wxml中写下

<view>首页
<text class="iconfont icon-shoucang"></text>
</view>

则页面显示效果为

在这里插入图片描述

目羲
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于微信小程序实现类似滴滴拼车小程序源码分享
06-15
小程序，开发工具导入项目即可查看源码分享 小程序是一个易上手的东西， 对于新手来说，多看官方文档，可以初步做出比较完整的小程序，正是因为简单上手，功能实现简单，小程序是越来越火，商业价值也越来越大。 1. 微信web开发者工具：微信小程序官网 这是个比较好用的编辑器，对于小程序编辑很方便。 2. 开发文档：微信小程序宝典秘籍 通过这个查找微信小程序的API，组件，框架等等。 3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于后台的模拟，得到JSON数据； 5. weui框架引入， 例如个人信息界面，用weui可以很快很方便的做 微信小程序开发和传统的H5开发还是有些不同的， 容易踩坑。 小程序是基于MVVM的的框架，合理利用数据绑定实现界面的更新是很关键的 开发时不要一股脑的写写写，多看看文档，你会发现你不小心原生写了个组件。。 进入开发平台，注册项目信息->在编辑器中上传版本->在开发版本中选择提交审核->审核通过->项目上线 更多内容下载项目即可查看
微信小程序 如何引入外部字体库iconfont的图标
11-26
如何引入外部字体库iconfont的图标，具体如下 直接使用阿里巴巴的网络路径 选择iconfont图标 官网：阿里巴巴矢量字体库 步骤：阿里巴巴字体库使用方法 全局引入app.wxss @font-face { font-family: 'iconfont'; /* project id 518032 */ src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot'); src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot?#iefix') for
微信小程序使用 iconfont
最新发布
前端挖掘机
03-11 428
base64。
微信小程序中引入iconfont字体的
hjh15827475896的博客
05-14 1948
小程序引入iconfont字体 在iconfont中选择并下载自己所要使用的字体图标 下载到本地并解压文件 解压后的文件是这样的 这里有两种使用方法 一是把这些字体图标生成到网络上, 使用的时候, 小程序会从网络上找到这些字体图标来使用 第二种就是, 把字体图标放在本地, 小程序使用的时候从本地读取, 各有优缺点, 自行选择 做法 1.从网络上读取 首先, 在iconfont 网店上 点击查看在线链接 把上面的代码复制, 覆盖 iconfont.css的文件 中相应的 @font-face
最新版微信小程序如何引入iconfont阿里矢量图库解决方案
明哥
03-03 2529
前言： 问题引发的原因来自最近在写微信小程序教学项目，项目中的一个图片是我随手切的,因为之前在Vue项目中一直在使用阿里矢量图库,我就想把阿里矢量图库ico图标集成到自己项目中,百度看了一些博客跟着做都引入不成功,研究了二十分钟弄出来,特此记录一下,同时作为参考文档供教学使用。 1、首先我们打开阿里矢量官网接着我们需要登录一下,如果没有账号这里可以使用微博注册登录一下,登录成功后,点击【资源管理-->>我的项目】接着我们点击【新建项目】填写【项目名称：这里随便...
微信小程序如何引入iconfont阿里巴巴素材库的图标
qq_51180625的博客
11-09 931
前往icon-font阿里巴巴矢量图标库 注册账号 将选中的图标点击添加入库 在这里查看加入库的素材： 选择好项目需要的素材，点击添加入项目： 创建新项目： 点击Font-class，点击生成代码： 点击复制代码 在小程序项目目录下新建一个新的文件夹styles来存放样式文件，在styles样式文件里新建一个wxss文件 将第8步复制的代码复制粘贴进去 在app.wxss全局样式中引入你的文件，这样你所有的页面都可以使用。 @import "..
微信小程序如何引入Iconfont
weixin_39553363的博客
08-05 3478
通过上述步骤，你可以在小程序中成功引入 Iconfont，以使用自定义的图标。请确保在应用图标前已经选择并添加所需的图标到 Iconfont 项目中，并按照上述步骤正确引入样式文件。打开 Iconfont 网站（https://www.iconfont.cn/）并登录账号，创建一个项目并添加所需的图标到项目中。是你在 Iconfont 中选择的图标的类名，通过添加类名即可在小程序页面中使用相应的图标。文件复制到你的小程序项目的目录中，通常是放在。在你的小程序项目的app.css样式文件中引入。
微信小程序使用iconfont图标
weixin_48166795的博客
11-20 4837
在微信小程序中使用iconfont图标的方法
在小程序中使用iconfont
DargonWisdom的博客
08-10 3844
小程序使用iconfont的使用
微信小程序引入iconfont图标
新疆程序猿的角落
01-06 549
微信小程序引入iconfont图标
微信小程序引用iconfont图标的方法
01-03
最近在研究微信小程序，自己写demo的时候想要引用巴里巴巴图标库的图标，于是： @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype...
微信小程序 -- 引入 iconfont 矢量图标（Font class ）
m0_72951245的博客
12-01 590
微信小程序引入 iconfont 矢量图标（Font class ）;
详细介绍将iconfont图标以代码的方式引入微信小程序项目中
yann02的博客
05-03 959
一、打开iconfont网址 二、选择一个图片添加入库 我们可以在这里选择多个icon图片添加入库，然后生成同一个项目的icon图标。 三、将选择的icon添加入项目 3.1、点击右上角的图标 3.2、添加至项目 此处按提示完成添加至项目。 四、编辑图标（可省略此步骤） 自定义图标名称规范 4.1、编辑图标名称 五、编辑项目（可选） 自定义项目图标名称...
微信小程序引入阿里巴巴iconfont字体图标的步骤（条理性强，易懂，细节）
weixin_40285008的博客
09-30 254
开始 1.进入iconfont官网，按提示选择登录方式登录，建议大家使用GitHub账号登录，没有GitHub账户的可以去GitHub官网进行注册。 2.输入你想要的图标的中文描述，例如“播放”，点击下面的搜索按钮。 3.选择一个你喜欢的图标，鼠标悬浮到该图标上，然后选择“购物车”图标，此时右上角的“购物车“图标会显示"1",说明图标添加成功。 4.点击右上角的“购物车”图标，点击下图绿色方框里...
微信小程序----引入外部字体库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.wxss，阿里云矢量图
a896532147的博客
09-22 456
意： 微信小程序不能直接引入，只能引入 base64 的 iconfont,所以这里要勾选Base64,不然引入到项目中将会无法显示。3，解压下载的文件并将文件名称为“iconfont.css”，的文件复制到项目中并修改文件后缀名为".wxss",如。全局引用在app.wxss中引入文件@import 'style/iconfont.wxss';为了在项目中使用方便，可进行修改前缀及font Family,点击保存，2，将项目需要的矢量图标加入到项目中，点击“下载至本地”
原生微信小程序引入离线iconfont字体图标
qq_15064263的博客
08-17 601
原生微信小程序引入离线iconfont字体图标
uniapp微信小程序怎么修改iconfont图标大小
05-16
你可以通过以下方式修改 uniapp 微信小程序中 iconfont 图标的大小： 1. 在需要使用 iconfont 的页面中，在 `style` 标签内设置 `font-size` 属性： ```css .iconfont { font-size: 24rpx; } ``` 这里将 `font-size` 设置为 `24rpx`，你可以根据你的需求来调整大小。 2. 在需要使用 iconfont 的地方，使用 `text` 组件来渲染 iconfont，并设置 `class` 属性为你在步骤 1 中设置的类名： ```html <text class="iconfont"></text> ``` 这里使用了 `` 这个 unicode 字符来表示 iconfont 中的一个图标。你需要将它替换成你想要使用的图标对应的 unicode 字符。 通过以上步骤，你就可以在 uniapp 微信小程序中使用 iconfont 并修改其大小了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值