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

已于 2022-04-04 00:34:22 修改
阅读量386 收藏 1
点赞数 1
文章标签： 前端
于 2022-04-04 00:32:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/www_lyh_624/article/details/123947658
版权
本文介绍了如何在微信小程序中使用iconfont字体图标。首先下载iconfont资源并仅保留所需文件，接着将iconfont.css内容导入app.wxss，调整字体路径至font文件夹，最后在小程序中直接应用图标。
摘要由CSDN通过智能技术生成

我是一般直接 下载到本地

其实也就这些文件用的到

把iconfont.css里面的内容直接弄到app.wxss里面，记得改路径，因为字体图标文件我们已经放到了font文件夹里面。

 然后就可以直接像下面这些使用它们了。

自学前端人员
关注
微信小程序使用 iconfont 彩色图标
我是写BUG的博客
10-19 360
当您在iconfont.cn中的图标有变更时，只需更改配置。文件中引入全局图标组件，以避免在每个page都引入。其他小程序不支持全局引入，您需要在各自page的。完成后，会在根目录生成对应的文件。，然后再次生成最新的图标组件。这将在项目根目录生成。
微信小程序使用字体图标的方法
11-30
在微信小程序中使用字体图标，通常需要遵循一系列步骤，这些步骤与传统的Web前端开发有所不同。以下是一个详细的过程，以阿里图标库为例，说明如何在微信小程序中集成并使用字体图标。 1. **下载字体图标**： 首先...
微信小程序引用iconfont图标的方法
10-17
主要介绍了微信小程序引用iconfont图标的方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序开发--如何使用字体图标
qq_40407998的博客
07-03 947
第一步：下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标 流程为： 选中需要的图标—>点击“添加入库”–>点击购物车进入购物车–>点击下载代码按钮。 点击下载代码，将得到名为download.zip的压缩包，解压将看到以下内容： 第二步：转换ttf文件 进入https://transfonter.org/平台，将解压出来的ttf字体文件转化成base64格式。 流程如下： 点击Add fonts --> 添加刚才下载的文件夹里的ico
微信小程序字体图标
赵玉的专栏
08-12 468
字体图标是一种在网页和应用程序中广泛使用的图形表示方法，它们以字体的形式存在，可以通过CSS样式来调用和显示。在微信小程序中，字体图标同样扮演着重要的角色，它们可以用于导航、按钮、图标列表等多种场景，以提高用户体验和界面的美观性。字体图标的具体显示由class中定义的伪元素（如:before或:after）的content属性控制，该属性通常设置为图标对应的Unicode编码。综上所述，字体图标在微信小程序中是一种非常实用的设计元素，通过合理的使用和管理，可以提升小程序的用户体验和美观性。
微信小程序使用字体图标
热门推荐
生如夏花 炫至茶靡
07-03 8万+
项目中常常需要使用到字体图标，微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。 第一步：下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标，如这里需要一个购物车的图标，流程为： 搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮。
微信小程序中使用iconfont(阿里矢量图标字体)
huangpb的博客
07-11 1万+
在微信小程序中使用 iconfont 主要有两种方式，第一种是使用 Font class 方式，第二种是使用 Unicode 方式。 方式一：Font class 方式 1. 在 http://iconfont.cn/ 选择你想要的图标，选择 Font class 类型并下载到本地。 2. 解压下载到本地的压缩包，将里面的 iconfont.css 文件复制到你的项目中，并将后缀名改为 ...
微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标
时光の尘的博客
03-03 4758
在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！
微信小程序使用字体图标——链接引入
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
07-13 3052
【代码】微信小程序使用字体图标——链接引入。
如何在微信小程序中使用阿里字体图标
aomiano55778的博客
08-16 330
第一步：下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标。 如这里需要一个购物车的图标，流程为：搜索“购物车”图标 ---> 点击“添加入库” --> 点击购物车进入购物车 --> 点击下载代码按钮。 点击下载代码，将得到名为download.zip的压缩包，解压将看到以下内容： 第二步：转换...
微信小程序中使用字体图标,解决字体图标包过大的问题
weixin_42657666的博客
06-29 1973
通过使用远程加载字体图标,解决包过大的问题
如何在微信小程序中使用字体图标
单眼皮的小熊
10-14 5379
方法一：将字体url转换为base64的格式后使用 　　第一步，下载需要的字体图： 　　打开阿里巴巴矢量图标库，选择自己需要的图标添加到购物车，然后点击购物车下载代码： 　　第二步，转换iconfont.ttf文件为base64格式： 　　然后将下载的包解压，你会看到一个格式为ttf的文件，注意，我们转换的就是这个文件，此处我们将解压的文件夹叫“原始文件夹”，打开Transfonter网站，按如下步骤操作：点击add fonts按钮添加我们之前提到的ttf文件 ——> 打开以及勾选下图中.
小程序中字体图标的使用
web
04-13 148
直接去原创文章看，我只记录一些主要链接（不建议看本文章） 转载：链接 链接地址：https://www.cnblogs.com/jiangtengteng/p/10524384.html 阿里巴巴图标库 transfonter 第三步，在微信小程序中使用字体图标： 　　打开微信小程序，默认我们让index页面显示刚刚下载的图标，所以要先打开index.wxss文件，然后将刚才转换后下载的文件夹解压，找到stylesheet.css文件，打开文件，复制所有样式到index.wxss文件中： 　　 找到其中的
微信小程序：字体图标的使用
最新发布
听海边涛声
10-04 353
微信小程序：字体图标的使用
微信小程序中使用iconfont作为图标库
ironprosper的博客
02-15 947
因为小程序白名单的限制，字体库文件（比如iconfont图标库）无法上传到微信平台上。需要将字体库文件转换为base64编码才能正常使用。
微信小程序使用iconfont图库
qq_45859670的博客
06-10 237
方式一（Font class） 生成链接 复制全部代码 在项目内创建样式文件（切记是以.wxss为后缀） 全局引用，局部引用都是可以的 例如全局引用： @import "./icons/iconfont.wxss"; <view class="iconfont icon-10"></view> ...
微信小程序使用iconfont
05-21
是可以使用iconfont的。你可以在iconfont官网上找到相应的图标并下载svg格式的图标文件。然后在小程序中使用wxss样式将该图标文件引入，例如： ```css @font-face { font-family: 'iconfont'; /* 项目名称 */ src: url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ``` 然后在wxml中使用该图标，例如： ```html <text class="iconfont"></text> ``` 其中，`` 是该图标对应的字体编码。你可以在iconfont官网上找到对应图标的编码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值