微信小程序如何使用字体图标

最新推荐文章于 2024-03-04 17:00:54 发布
最新推荐文章于 2024-03-04 17:00:54 发布
阅读量2.3k 收藏 2
点赞数 2
分类专栏： 日志 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38944959/article/details/89516615
版权

在小程序中该如何使用字体图标？以下Font Awesome为例

1、第一步：我们需要进入Font Awesome官网下载字体图标的文件
在这里插入图片描述
2、第二步：我们需要用到一个Transfonter生成工具。打开刚才下载的文件，在fonts文件夹找到fontawesome-webfont.ttf
在这里插入图片描述
打开Transfonter官网，将fontawesome-webfont.ttf上传，选择base64编码，然后convert
在这里插入图片描述在这里插入图片描述
3、第三步：等待转换，转换完成后，点击download下载，下载完成后打开文件，找到stylesheet.css，将源码复制下来，然后进入小程序，将复制的代码放到app.wxss
在这里插入图片描述
4、最后一步：找到font-awesome里的font-awesome.css，除去第一段，将其他的都复制下来放到app.wxss，然后按照font-awesome的规范来用就可以了
在这里插入图片描述在这里插入图片描述

微信小程序使用字体图标
ChibiMarukoChan的博客
09-25 1万+
下载阿里巴巴矢量图标库的操作见文章《mui增加自定义icon图标》 解压如下： 第二步：将解压出来的ttf字体文件转化成base64格式 转换地址：https://transfonter.org/ 解压后得到如下的几个文件： 在微信小程序中使用： 用经过转码之后的stylesheet.css中的@font-face{}部分替换原来没转换之前的iconfont.css中的@f...
微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标
时光の尘的博客
03-03 5757
在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！
小程序中字体图标的使用
web
04-13 184
直接去原创文章看，我只记录一些主要链接（不建议看本文章） 转载：链接 链接地址：https://www.cnblogs.com/jiangtengteng/p/10524384.html 阿里巴巴图标库 transfonter 第三步，在微信小程序中使用字体图标： 　　打开微信小程序，默认我们让index页面显示刚刚下载的图标，所以要先打开index.wxss文件，然后将刚才转换后下载的文件夹解压，找到stylesheet.css文件，打开文件，复制所有样式到index.wxss文件中： 　　 找到其中的
微信小程序怎么使用字体图标
青阳的博客
05-27 2638
首先将阿里图标下载到本地解压 转换ttf文件 进入https://transfonter.org/，将解压出来的ttf字体文件转化成base64格式。流程如下： 点击下载，得到转换后的压缩包，名为transfonter.org-开头。解压可以得到如下图的几个文件： 将里面的stylesheet.css全部复制到微信小程序中的样式文件：app.wxss，并且在将阿里图库下...
如何在微信小程序中使用icon字体图表
m0_59638475的博客
02-09 872
微信小程序使用ico字体图标
微信小程序使用字体图标的方法
11-30
在微信小程序中使用字体图标，通常需要遵循一系列步骤，这些步骤与传统的Web前端开发有所不同。以下是一个详细的过程，以阿里图标库为例，说明如何在微信小程序中集成并使用字体图标。 1. **下载字体图标**： 首先...
微信小程序使用字体图标库
rookie的博客
01-03 1623
在微信小程序项目中需要用到字体图标，所以记录一下解决过程。因为比较喜欢使用阿里巴巴矢量图标库，就以此为例来说。 一、去阿里巴巴矢量图标库下载需要的图标 进入https://www.iconfont.cn/，在我的项目中添加自己需要的图标，具体如下 搜索图标后，添加至项目 将项目下载至本地并解压 二、转换ttf文件 将解压后得到的ttf文件拿到https://trans...
微信小程序中使用特殊字体
辽辽无期的博客
03-04 1552
复制这样式放到你写的wxss文件中。使用下面这个网站进行字体转换。推荐几个常用下载字体的网站。
9个适合web开发人员的CSS工具
BOM485480的博客
08-12 666
不管你是一个多么有经验的开发人员，你都想让你的生活尽可能的简单。正确的工具可以帮助您完成此任务。你的能力取决于你使用的工具，所以花点时间挑选适合你需要的工具是明智的。 在本文中，我将讨论每个web开发人员都可以使用的一些工具，以便使你的工作更轻松、更高效。 1、Transition Generator 有一个CSS属性有很多可能性，这让你很难记住所有的CSS属性，那就是 transition 属性。 当你不确定你想要什么样的过渡，或者你只是想尝试其中一些过渡的时候，这个工具就很有用了。这个工具可以很容易地
9个适用于Web开发人员的CSS工具
前端全栈开发者
05-10 404
不管你是一个多么有经验的开发人员，你都想让你的生活尽可能的简单。正确的工具可以帮助您完成此任务。你的能力取决于你使用的工具，所以花点时间挑选适合你需要的工具是明智的。 在本文中，我将讨论每个web开发人员都可以使用的一些工具，以便使你的工作更轻松、更高效。 1. Transition Generator 有一个CSS属性有很多可能性，这让你很难记住所有的CSS属性，那就是 transition 属性。 当你不确定你想要什么样的过渡，或者你只是想尝试其中一些过渡的时候，这个工具就很有用了。这个工具可以很容.
微信小程序引入使用fontawesome图标库【内附懒人包下载导入即用】
weixin_44229624的博客
08-08 3386
小程序引入fontawesome需要做的步骤是比其他的多一点，比如说本质上下载下来fontawsome没法直接用，他有好多的css，其实也有好多TTF的字体文件，对于他的这种 TTF的文件是需要给它进行一个转换，转换之后把它变成是比如说base64，它编码变成之后再把它引入到我们的项目中。
CSS免费在线字体格式转换器 CSS @font-face 生成器
任磊
01-04 3491
CSS免费在线字体格式转换器 CSS @font-face 生成器
字体转换步骤
weixin_41813243的博客
12-17 230
https://blog.youkuaiyun.com/qq_36206799/article/details/108011844 https://transfonter.org/
用户电脑没有相应字体怎么办?
weixin_66591252的博客
08-16 766
在前端开发中想要让页面变得富有创意,与众不同还要美观,字体是个不可或缺的配置。但是有时候会遇到好看的字体用户电脑中没有安装,显示不出来的尴尬.怎么办呢?我给大家介绍一种解决方法。
微信小程序引入下载至本地的iconfont图标
Quentin0823的博客
07-06 4849
第一步选好自己要用的icon图标并下载至本地 下载后得到这样目录的文件 第二步 转换成base64 网址：https://transfonter.org/ 选择后缀为.ttf的文件 第三步：下载成功后，得到一个名为 “transfonter.org” 开头的压缩包，解压后得到三个文件，打开其中 “stylesheet.css” 文件第四步：在小程序目录新建放置图标资源的文件这是我自己的一个目录，可以看到在iconfont.wxss中，如果是直接复制文件的话，记得把后缀css改成wxss 把@font-fac
微信小程序引用fontawesome字体
热门推荐
yiyingcsdn的博客
05-05 1万+
1.到fontawesome官网下载字体包。 2.打开1中下载的压缩包找到.ttf文件。 3.上传2中的字体文件到https://transfonter.org/，选择base64 编吗 ，convert后下载. 4.打开3中下载的文件，找到stylesheet.css. 5.打开4中的文件，复制里面的代码到微信小程序中的app.wxss中。
微信小程序使用阿里图标
最新发布
03-20
<think>好的，用户想了解如何在微信小程序中使用阿里图标。首先，我需要回忆一下阿里图标库的使用流程，通常是在网页端选择图标，生成项目，然后下载字体或符号代码。但微信小程序的环境可能有些限制，比如字体文件可能需要转为base64或者使用其他方式引入。 然后，用户可能遇到的问题包括如何在微信小程序中正确引入阿里图标的资源，以及如何使用图标，可能需要将字体文件转换为base64编码，或者使用iconfont的CSS方式。另外，微信小程序的WXSS和HTML有所不同，需要注意路径问题和样式引入方法。 接下来，应该分步骤说明：从阿里图标库创建项目、添加图标、生成代码，然后下载到本地，修改CSS为WXSS，并在小程序中引用。可能需要将字体文件转为base64嵌入，避免路径问题。同时，提醒用户注意图标的引用方式，比如使用类名和Unicode编码，或者使用SVG方式。 还需要考虑用户可能对步骤不熟悉，比如如何修改CSS文件中的路径，如何在小程序的WXML中使用图标，可能需要具体的代码示例。另外，检查是否需要更新阿里图标的URL到HTTPS，因为微信小程序要求网络请求必须为HTTPS。 最后，确认是否有其他替代方案，比如使用小程序的icon组件，但阿里图标可能更丰富，所以用户可能更倾向于使用后者。总结步骤，确保用户能一步步操作，避免常见错误，比如路径错误或格式不支持。</think>在微信小程序中使用阿里图标（Iconfont）的步骤如下： ### 一、准备工作 1. 访问阿里图标官网：https://www.iconfont.cn/ 2. 登录账号 → 创建新项目 → 设置`FontClass/Symbol`前缀（推荐格式：`icon-`） 3. 将需要的图标`添加到项目` ### 二、生成字体文件 1. 进入项目 → 点击`下载至本地` 2. 解压文件后包含： - `iconfont.css`（核心文件） - `.eot/.ttf/.woff`等字体文件 - `demo.html`（使用示例） ### 三、微信小程序适配 1. 修改`iconfont.css`为`iconfont.wxss` 2. 修改字体路径（微信小程序不支持本地字体文件）： ```css @font-face { font-family: 'iconfont'; src: url('data:application/x-font-woff2;base64,【你的base64编码】') format('woff2'); } ``` *注：需将字体文件通过[转换工具](https://transfonter.org/)转为base64格式* ### 四、集成到小程序 1. 将`iconfont.wxss`复制到项目目录 2. 在`app.wxss`中全局引入： ```css @import "./iconfont.wxss"; ``` ### 五、使用图标 在WXML中使用两种方式： 1. Unicode方式 ```html <text class="iconfont">3</text> ``` 2. Class方式（需在阿里平台开启`Font Class`） ```html <text class="iconfont icon-xxx"></text> ``` ### 六、注意事项 1. 小程序包大小限制：建议只保留必要图标 2. 多色图标需使用`Symbol`方式（需要额外处理） 3. 更新图标后需重新生成代码并同步修改base64 4. 推荐使用HTTPS格式的在线链接（需在阿里平台配置CDN） ### 替代方案 如果觉得字体图标复杂，可以使用： 1. 直接引用阿里图标的在线CDN（需配置域名白名单） 2. 将SVG转为`<image>`标签使用 3. 使用微信原生`<icon>`组件（但图标种类有限）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值