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

阿里矢量图标库使用指南
最新推荐文章于 2024-11-06 10:18:06 发布
原创 最新推荐文章于 2024-11-06 10:18:06 发布 · 481 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了如何从阿里巴巴矢量图标库中选择并使用图标。步骤包括：选择图标加入购物车，添加至项目，下载并解压文件，复制iconfont.css至项目中，最后通过<icon>标签在页面中调用图标。

1、在阿里巴巴矢量图标库选择你要的图标https://www.iconfont.cn/，加入购物车

2、点击右上角购物车，添加到项目

3、下载至本地

4、解压后，复制iconfont.css到app.wxss

5、使用：

<icon class='iconfont icon-renwu'></icon>

6、也可以复制iconfont.css到自己新建的一个样式表如：icon.wxss，然后使用@import引入外联样式表

如： @import "../style/icon.wxss";

使用方法一致：

<icon class='iconfont icon-renwu'></icon>

 

微信小程序使用 iconfont 彩色图标
我是写BUG的博客
10-19 584
当您在iconfont.cn中的图标有变更时，只需更改配置。文件中引入全局图标组件，以避免在每个page都引入。其他小程序不支持全局引入，您需要在各自page的。完成后，会在根目录生成对应的文件。，然后再次生成最新的图标组件。这将在项目根目录生成。
Vue 中 iconfont 使用
大灰狼的小绵羊哥哥的博客
10-16 8085
Vue 中 iconfont 使用
微信小程序引用iconfont图标的方法
10-17
主要介绍了微信小程序引用iconfont图标的方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
小程序中使用font-awesome
m0_63419305的博客
03-12 1590
在小程序项目中使用Font Awesome
微信小程序使用font-awesome图标库
03-29
网上看到的方法，亲测成功：参考方法 下载font-awesome字体包 打开Transfonter网站，上传字体fontawesome-webfont.ttf（理论其它文件格式也可以转换，并未尝试），选择base64编码，convert后下载 下载得到的包中有style文件，打开后获得以下代码，并对照font-awesome.css中的内容，加入到微信小程序的app.wxss文件中 @font-face { font-family: 'fa'; src: url([removed]AAEAAAANAIAAAwBQRkZUTXLOMI
微信小程序使用Font Awesome
征途人生&梦
06-23 833
下载Font Awesome，然后解压到项目的static目录下。 修改css后缀为wxss 编辑font-awesome.wxss的字体目录 @font-face { font-family: 'FontAwesome'; src: url('/static/awesome/fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('/static/awesome/fonts/fontawesome-webfont.eot?#iefix&amp
惊！小程序也能引用font-awesome
CanMoHaiYan的博客
06-29 837
小程序引入外部字体文件教程 在这里插入代码片我们知道，字体图标有着许多优点，比如font-awesome、iconfont之类的字体图标库。首先它比位图图标使用起来方便很多，不会失真，图标颜色随便调，不言自喻它是咱们web前端的一大好伙伴！ 但当我们开发微信小程序时，也想引用font-awesome怎么办，小程序的样式表是wxss，直接修改font-awesome的后缀名？不不不，事情恐怕没那么简...
微信小程序使用iconfont图标
q1004124842的博客
04-28 804
图标的下载和平时一致,主要区别是在使用的时候 1. 引用的路径需要根据文件地址引入 2. 需要对woff文件做转换,转换网站https://transfonter.org/, 开启base64转换 @font-face { font-family: "iconfont"; /* Project id 1183980 */ /* 引用的路径也需要做修改 */ src: url('/style/iconfont.woff2?t=1651111039226') format('
微信小程序使用IconFont.zip
最新发布
09-18
微信小程序使用IconFont.zip文件中的内容涉及了微信小程序中如何使用矢量图标字体的技术。在这一主题下，开发者可以通过下载并解压该压缩包，获取到一个项目文件夹，这个文件夹中包含了所有相关的开发资源和代码示例...
iconfont图标_菜单栏使用自定义Icon （iconfont.cn）
weixin_39752828的博客
12-01 630
注 ：最新版本已经支持导入，参照增加IconFont组件、菜单图标可以使用自己的IconFont项目图标 by uv-w · Pull Request #3517 · ant-design/ant-design-pro​github.com直接将iconfont项目文件下载到项目中，比如 '/public'下面，然后在'src/defaultSettings.js中引入，例如"iconfontUr...
微信小程序引入使用fontawesome图标库【内附懒人包下载导入即用】
weixin_44229624的博客
08-08 4254
小程序引入fontawesome需要做的步骤是比其他的多一点，比如说本质上下载下来fontawsome没法直接用，他有好多的css，其实也有好多TTF的字体文件，对于他的这种 TTF的文件是需要给它进行一个转换，转换之后把它变成是比如说base64，它编码变成之后再把它引入到我们的项目中。
微信小程序里更简洁的使用使用fontawesome
qq_37422024的博客
11-09 1033
贴上源帖 原帖子 自己试了试原作者的办法后，是可以使用的，但是复制到开发者工具里之后，直接几百行有点不够舒服，所以想出的这个办法。 按照原作者的方法得到 stylesheet.css 和 font-awesome.css 之后，直接将扩展名改为‘.wxss后，在小程序根目录下新建一个“stylesheets”文件夹，将这两个文件放进来（也可按照自己的习惯放置） 最后在小程序app.wxs...
iconfont使用方法
6块腹肌的博客
12-23 1678
1、进入iconfont官网：https://www.iconfont.cn/collections/index 2、选择自己需要的icon，并且加入购物车 3、在右上角点击进入刚才进入购物车的icon 3、可以直接点击下载代码，也可以添加到项目中，然后再下载代码，都是一样的。 4、将下载的代码解压缩，得到以下文件 将iconfont.css、iconfont.e...
在vue中使用iconfont的小图标
weixin_48111439的博客
12-01 577
在vue中使用iconfont的小图标 第一步： 将选好的小图标加入购物车，添加至项目。 第二步： 在我的项目里，点击查看在线链接 第三步：复制链接，到项目里的public–>index.html中，使用link引入 <link rel="stylesheet" href="//at.alicdn.com/t/font_2235315_fnfxqg8l9c.css"> 第四步： 复制需要使用的小图标的代码 第五步：使用class=“iconfont xxxxx” <i cl
iconfont 实践及使用优化
linshaolie
07-24 1462
iconfont 的实践及使用优化，让storyboard 和 xib 实时显示icon
在项目使用iconfont
m0_53912016的博客
06-20 198
https://www.cnblogs.com/yaya-003/p/12039729.html
uni-app 图标库整合最佳实践：使用 iconfont 构建属于自己的图标库
前端梦工厂
11-06 4055
阿里巴巴矢量图标库是一种图标字体库，它将图标转换为字体的形式，并通过unicode编码进行引用。通过使用iconfont，开发者可以使用字体图标代替传统的图片图标，以提高网页加载速度和图标的灵活性。iconfont中的图标可以使用 CSS 进行样式控制，并且可以根据需要进行缩放、颜色调整等操作，非常方便。官方链接：iconfont - 阿里巴巴矢量图标库通过本篇文章，我们了解了在前端项目中使用 iconfont 自定义图标库的方法和步骤。
iconfont图标使用教程
weixin_64161321的博客
06-15 2396
都可以），但是切记如果你使用了在线链接，则必须在网站上更新在线链接，然后将该链接更新到你的项目中，如果你是本地使用，则必须下载最新的代码，然后更新到你的项目中，否则修改无效。这是一种全新的使用方式，应该说这才是未来的主流，也是阿里矢量图标库平台目前推荐的用法，但是在前端，新技术要向老设备看齐，所以你懂得。需要注意的是，如果在图标库中新增加了图标，则需要更新在线链接并把该链接重新引入到实际项目中，或者重新下载代码到本地，然后在实际项目中引入最新的。中查看，或者可以在阿里矢量图标库的网站上，进入我的项目查看。
微信小程序 组件使用iconfont字体图标不显示
06-08
<think>我们正在讨论微信小程序中使用iconfont字体图标不显示的问题。根据之前的对话历史，用户希望得到解决方案。我将提供结构清晰的解决方案，并参考相关的站内引用（如果有的话），但由于当前上下文没有提供具体的引用来源，我将专注于通用解决方案。解决方案步骤：1.**正确引入字体文件**：在小程序中，我们需要将iconfont的字体文件（通常是.ttf或.otf格式）转换为base64格式，因为小程序不支持直接引用外部字体文件。我们可以使用在线工具（如transfonter）将字体文件转换为base64，然后在小程序的样式文件中引入。2.**创建字体样式**：在app.wxss中定义字体样式，例如：```css@font-face{font-family:'iconfont';src:url('data:application/x-font-ttf;charset=utf-8;base64,转换后的base64字符串')format('truetype');}.iconfont{font-family:"iconfont"!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}```3.**使用图标**：在组件的wxml文件中，使用类名`iconfont`和对应图标的unicode字符。例如：```html<textclass="iconfont"></text>```4.**检查字符编码**：注意，在wxml中，unicode字符应该使用十进制或十六进制的形式。通常，我们在iconfont官网上复制的是十六进制（如`&#x`开头），但有时小程序可能需要十进制。确保在wxml中使用的字符编码与iconfont项目中的一致。5.**常见问题排查**：-字体文件路径是否正确？-转换的base64字符串是否完整？-字体名称是否一致？-是否在页面或组件的wxss中覆盖了.iconfont的样式？-检查图标的unicode是否输入正确。6.**使用阿里图标库的官方方法**：阿里图标库提供了“生成代码”的功能，我们可以选择Base64格式，然后下载并获取到base64字符串。然后将此字符串替换到@font-face中的src属性即可。7.**注意小程序包大小限制**：转换为base64后，字体文件会增大约1/3，注意小程序的包大小限制（主包或整个小程序不超过2M，分包不超过2M）。如果图标很多，建议只选择需要的图标，减少字体文件体积。8.**使用weapp-iconfont组件**：也可以使用第三方组件，如`weapp-iconfont`，它已经处理了兼容性问题。但要注意，使用第三方组件可能会增加包大小，并且需要按照其文档使用。9.**真机调试**：由于开发工具和真机环境可能存在差异，建议在真机上进行调试。参考站内引用：[^1]§§相关问题§§1.微信小程序支持哪些格式的字体文件？2.如何将.ttf字体文件转换为base64编码？3.微信小程序中除了iconfont，还有哪些图标使用方案？</think> 对于微信小程序中使用 iconfont 字体图标不显示的问题，以下是完整的解决方案和排查步骤： ### 解决方案 1. **正确引入字体文件** - 将下载的 `iconfont.ttf` 文件通过 [Iconfont转换工具](https://transfonter.org/) 转换为 base64 格式 - 在 app.wxss 中全局声明字体： ```css @font-face { font-family: 'iconfont'; src: url('data:application/x-font-ttf;charset=utf-8;base64,转换后的base64字符串') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; } ``` 2. **组件使用规范** - WXML 中使用 `<text>` 标签： ```html <text class="iconfont"></text> ``` - 必须使用 `&#x` + 图标代码（在 iconfont.css 中查看） 3. **文件路径验证** - 检查图标文件是否放在小程序目录中（推荐位置：`/static/iconfont/`） - 确认 wxss 中路径引用正确： ```css @font-face { src: url('/static/iconfont/iconfont.ttf'); } ``` 4. **字符编码匹配** - 在 iconfont 项目设置中开启 **Base64** 和 **Unicode** 选项 - 确保组件中使用的 Unicode 值与下载的 CSS 文件完全一致 5. **字体加载策略** ```javascript // app.js 中添加字体预加载 wx.loadFontFace({ family: 'iconfont', source: 'url("https://xxx/iconfont.ttf")', success: console.log, fail: console.error }) ``` ### 常见问题排查 1. **控制台报错：加载字体失败** - 解决方案：将字体文件添加到小程序后台 **"下载文件"** 合法域名 2. **iOS 不显示但安卓正常** - 原因：iOS 需要 .woff 格式字体 - 解决方案：在 iconfont 下载时选择 **WOFF** 格式 3. **图标显示为方块** - 检查 Unicode 值是否包含多余的 `;`（正确格式：`&#xe601`） - 确认 CSS 中 font-family 命名与组件使用一致 4. **图标模糊** - 设置合适的 font-size 和 line-height： ```css .iconfont { font-size: 40rpx; line-height: 1; } ``` ### 最佳实践建议 1. 使用阿里官方 **小程序模式** (勾选 `平台适配-微信小程序`) 2. 定期更新字体文件（修改图标后需重新下载） 3. 复杂项目推荐使用 [weapp-iconfont](https://github.com/iconfont-cli/weapp-iconfont) 插件自动构建 > 通过以上方法，可解决 95% 的图标显示问题。真机调试时如仍有异常，请检查微信客户端版本是否过旧[^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LLL_LH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值