小程序中引用iconfont图标

最新推荐文章于 2024-11-24 12:34:35 发布
原创 最新推荐文章于 2024-11-24 12:34:35 发布 · 621 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #iconfont #前端 #css #icon图标

该博客介绍了在小程序中引入阿里图标库图标的详细步骤，包括在阿里图标库找图标加入项目、下载到本地，将iconfont.css改为iconfont.wxss复制到项目，在app.wxss中引入，替换@font-face代码，最后在项目中引用。

1.在阿里图标库中找到需要的图标并加入项目

2.把项目下载项目到本地
image.png

3.在本地打开下载的目录将 iconfont.css文件改为iconfont.wxss复制到项目中
image.png
image.png

4.在app.wxss中引入iconfont.wxss
image.png

5.在阿里图标库我的项目中 点击复制代码
image.png

6.将复制的@font-face替换掉iconfont.wxss中的@font-face
image.png

7.在项目中引用
image.png

详细教程点击传送门

小程序使用iconfont字体图标
m0_69876298的博客
08-30 785
微信小程序中在线使用iconfont字体图标
微信小程序开发引用iconfont字体图标
风中追风
05-18 651
uniapp微信小程序开发引用iconfont字体图标
小程序中引入iconfont
weixin_30339457的博客
07-04 263
注释:本人喜欢 font class, 你们可以依葫芦画瓢unicode和 symbol,,下面是font class 演示: 1.选择好图标,然后: font class 2.步骤二: 复制代码,存入你自己新建的 wxss文件 =>>> 3.步骤三: 引入 iconfont 4.步骤四 wxml中引用 class...
微信小程序引入iconfont.ttf
weixin_43421060的博客
07-01 1608
微信小程序引入iconfont.ttf 步骤 打开 www.iconfont.cn 把需要的用到的icon添加到库 添加完后，点击添加至项目 点击下载到本地，把整个icon的项目下载下来。 把项目下载下来压缩后，得到一个文件夹 在项目中创建一个新的目录iconfont ，把压缩文件里的iconfont.ttf和iconfont.css复制到新目录下，把iconfont.css文件的后缀改为...
微信小程序引入iconfont单色图标实例(Unicode方式)
gyueh的博客
08-18 1214
进入https://www.iconfont.cn/官网， 搜索目标图标,图标类型为“单色图标” 将需要的图标添加到购物车，点击购物车将图标添加至相应的目标项目中 打开目标项目，下载代码至本地(另外:下载Unicode格式) 将下载的文件进行解压，解压后得到如图所示文件 打开iconfont.css文件,删除文件中src属性的内容 回到iconfont网站，点击复制代码 将复制的代码写进@font-face中，如图： 在小程序项目文件中建一个新的文件夹，命名..
小程序iconfont使用
weixin_37974230的博客
07-28 993
做小程序时候需要用到iconfont图标，找了网上别的方法，最终也没有使用base64转化； 首先从iconfont库下载 下载下来的文件是：     然后把iconfont.css改为小程序可以识别的.wxss文件,放在小程序项目里面   引用的时候只需要在用到的地方引用， 也可以再app.wxss全局引用； 使用效果和平时项目中一样    ...
微信小程序中使用阿里（iconfont）字体图标
markkr133的博客
05-12 2万+
一、下载图标1、首先在阿里云（iconfont）中找到项目中所需要的图标并且加入到购物车。2、添加至项目并下载本地             （1）添加至项目 ，如图：下                                 （2） 选择小程序项目名称并点确定，如图：下                             （3）选择Unicode，点击‘暂无代码，点此生成’代码，如图：...
微信小程序引用iconfont图标的方法
10-17
2. 微信小程序引用iconfont图标的常规方法：在传统的web开发中，可以通过@font-face规则加载字体文件，然后通过font-family属性指定字体，content属性指定对应的Unicode字符来显示特定的图标。但是微信小程序的开发...
微信小程序使用 iconfont 彩色图标
我是写BUG的博客
10-19 611
当您在iconfont.cn中的图标有变更时，只需更改配置。文件中引入全局图标组件，以避免在每个page都引入。其他小程序不支持全局引入，您需要在各自page的。完成后，会在根目录生成对应的文件。，然后再次生成最新的图标组件。这将在项目根目录生成。
在小程序中使用阿里文字图标库
AndrewNeo
09-13 1万+
第一步： 登录阿里矢量图标库，http://www.iconfont.cn/ 第二步： 搜索需要的图标，比如：”我”，并添加入库 第三步：点击购物车，并将图标添加到自己的项目中，如果没有则新建一个项目，此处我的项目名为esim,并确定，会跳转到第四步页面 第四步：选择unicode,并下载到本地 第五步：解压并选取iconfont文件 第六步：打开...
微信小程序使用icon图标
沉默老曹的博客
04-03 2517
微信小程序使用fontawesome库使用icon图标，网上有很多教程，按照网上说法制作，引入到微信小程序中，但是验证成功，只能使用部分图标，结果不尽如人意。后面使用阿里巴巴开源。3.在小程序中引入iconfont中生成的代码，这样基本的操作完成了，在小程序中就可以使用了，如果想要增加新的图标，需要更新这部分代码即可。2.将想要使用的icon添加到购物车中，将购物车中的图标添加到项目中，在项目中生成代码。1. 建立账号，资源管理中新建立项目，在iconfont中选中自己想要使用的icon。
小程序icon-font的使用
越努力越幸运的博客
04-22 537
1.icon-font使用（tabBar） 阿里icon-font下载网址：https://www.iconfont.cn/ 先找自己喜欢的icon-font然后把他们放到自己的项目中，接着使用浏览器进入这个框起来的地方 全选该页面的所有代码，复制后放到小程序的项目中 新建一个iconfont.wxss文件，然后把刚才复制的代码放进去即可。 之后我们把这个wxss导入进来，直接导入到app.wxss中，让全局都可以使用： 接着我们在app.json中引用，使用"tabBar":{}，如下： 在wx
小程序引用icon图标(入门)
技术分享，共同进步
04-26 2321
iconfont网站 1.先把图标添加到项目(新建项目) 2.在page文件下 新建iconfont目录和子文件iconfont.wxss iconfont.wxss 代码复制到浏览器,打开css文件 全部复制,放到新建的iconfont.wxss文件里 初步 iconfont.wxss @font-face {font-family: "iconfont"; src: url('//at.alicdn.com/t/font_2512718_n1u318gm1b.eot?t=16194169
微信小程序中使用iconfont的详细教程
AI小美好
11-24 3300
本文详细介绍了微信小程序中使用iconfont的原因，优势，场景以及详细的操作步骤，便于你快速自定义字体图标。
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
m0_62823653的博客
06-20 7575
由于微信小程序线上的资源限制了各种接口安全域名，所以在小程序里如果想使用iconfont字体图标就会稍有不同，其实只需要把平时的iconfont字体图标远程路径换成base64引入，就可以解决小程序引入iconfont字体图标这个问题了1.将想要的图标添加入库并下载代码：二、下载成功后，将得到一个名为 "download.zip" 的文件，然后解压得到这么一堆文件：推荐去 https://transfonter.org 转换1.配置选项，将配置改为如下红色框所示，并打开 Base64 encode 选项：
小程序引入iconfont字体图标
janyxh的博客
09-18 1746
1.挑选图标，加入项目 2.进入项目，下载到本地 3.解压文件后，复制iconfont.css放到小程序项目里，并重命名，修改为iconfont.wxss。并在app.wxss内引入该样式。 @import "iconfont.wxss"; /* 修改成你放置样式文件的路径 */ 4.复制在线链接代码，替换iconfont.wxss里的@font-face样式。 5.打开wxml文件，写一行代码，格式如下。 <text class="iconfont icon-jiaguanzhu"&
在小程序中使用iconfont
DargonWisdom的博客
08-10 4026
小程序使用iconfont的使用
【小程序开发】uniapp引入iconfont图标及使用方式
热门推荐
qq_49002903的博客
10-24 6万+
你还在发愁不知道如何在uniapp开发中使用iconfont阿里图标库吗？ 你还在是下载一张张图片用来开发项目嘛？来试试这个iconfont图标库，很香的
微信小程序iconfont的图标引入
月落星河
10-27 1万+
微信小程序中的想要引入字体样式的时候是不支持的，那么我们有时候却需要这个功能所以接下来去介绍一下怎么去引入iconfont的图标库。 1.打开iconfont http://www.iconfont.cn/ 2.新建个项目，当然我这里已经新建完了。 3.选择你需要的图标添加到购物车。 4.点击右上角的购物车，把这个图标添加到你的项目中。 5.打开你的项目。 6.点击下载到本地 7....
微信小程序中使用 iconfont 图标hbuilder
最新发布
04-28
<think>好的，我现在需要帮助用户解决在微信小程序中使用iconfont图标的问题，特别是在HBuilder工具中的配置和引用。首先，我需要回顾用户提供的引用内容，看看有没有相关的信息。 引用[1]提到了使用mini-program-iconfont-cli插件将图标转换为组件，并给出了安装命令。这可能是一个关键步骤。用户可能需要在HBuilder中安装这个npm包，然后进行配置。引用[2]和[3]提到HBuilderX开发环境和uni-app的组件，但可能和图标使用关系不大。引用[4]讨论了openID和tabBar，可能不直接相关，但需要注意用户可能对uni-app的结构有一定了解。 接下来，我需要整理步骤。首先，用户需要安装插件，然后下载iconfont图标，接着生成组件，再在项目中配置，最后在页面中使用组件。可能需要详细说明每个步骤，尤其是配置部分，比如修改iconfont.json文件，设置组件路径和输出目录。还要注意小程序本身的限制，比如无法直接使用外链字体文件，所以需要转为base64或本地文件。 另外，用户可能遇到的问题包括路径配置错误、图标不显示、插件版本兼容性等，应该在注意事项里提到这些，并给出更新插件、检查路径等建议。同时，示例代码需要准确，确保用户能正确复制和使用。 需要确认所有步骤符合HBuilderX的环境，例如项目结构是否正确，如何运行和编译。可能还需要指导用户如何在微信开发者工具中查看效果，以及如何调试可能出现的问题。最后，生成相关问题时要围绕iconfont的使用、优化、动态加载等，帮助用户扩展知识。</think>### 微信小程序 HBuilder 中配置和使用 iconfont 图标教程 #### 一、配置 iconfont 组件库 1. **安装插件** 在 HBuilder X 项目根目录下执行命令安装转换工具： ```bash npm install mini-program-iconfont-cli --save-dev ``` 该插件可将 iconfont 图标自动转换为小程序可用的组件格式[^1]。 2. **下载 iconfont 图标文件** - 登录 [iconfont 官网](https://www.iconfont.cn/) 选择图标并添加到项目 - 点击「下载至本地」按钮，解压后将以下文件复制到项目根目录的 `iconfont` 文件夹中： - `iconfont.ttf`（字体文件） - `iconfont.css`（样式文件） - `iconfont.json`（图标元数据） 3. **生成组件** 在项目根目录新建 `iconfont.json` 配置文件： ```json { "symbol_url": "iconfont/iconfont.json", "save_dir": "components/iconfont", "use_rpx": true, "trim_icon_prefix": "icon-", "default_icon_size": 32 } ``` 运行命令生成组件： ```bash npx iconfont-init ``` --- #### 二、在 uni-app 中使用 1. **注册组件** 在 `pages.json` 中添加全局组件配置： ```json { "usingComponents": { "iconfont": "/components/iconfont/iconfont" } } ``` 2. **页面调用示例** ```html <view class="container"> <iconfont name="home" color="#ff0000" size="48"></iconfont> <iconfont name="user" :size="dynamicSize"></iconfont> </view> ``` --- #### 三、注意事项 1. **更新图标** 当图标库有更新时，需重新下载文件覆盖原文件，并执行： ```bash npx iconfont-update ``` 2. **路径验证** - 确保 `symbol_url` 路径正确指向下载的 JSON 文件 - 检查生成的组件是否出现在 `components/iconfont` 目录 3. **性能优化** 建议将高频使用图标通过 `image` 模式转为 Base64 编码（需在配置文件中设置 `"css_url": "iconfont/iconfont.css"`）[^1] ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值