微信小程序使用字体图标

项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。

第一步:下载需要的字体图标

进入阿里图标官网http://iconfont.cn/搜索自己想要的图标,如这里需要一个购物车的图标,流程为:

搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮。


点击下载代码,将得到名为download.zip的压缩包,解压将看到以下内容:


第二步:转换ttf文件

进入https://transfonter.org/平台,将解压出来的ttf字体文件转化成base64格式。流程如下:



点击下载,得到转换后的压缩包,名为transfonter.org-开头。解压可以得到如下图的几个文件:


第三步:在微信小程序中使用

新建微信小程序,将默认生成的代码删除。

1--在index.css文件中添加样式内容。打开刚刚我们经过转换的解压出来的文件,找到stylesheet.css,将其中的内容全部复制到index.css文件中。注意是转换过的那个文件。


2--打开没有转换过的download.zip解压出来的文件,找到iconfont.css文件,将这个文件中的没有打岔的内容复制到index.css文件中。@font-face这部分不要,只要下边的这部分。



3--在index.wxml中使用字体图标。代码如下:

<!--index.wxml-->
<view class="container">
个人中心
<text class="iconfont icon-wode" style="font-size:50px;color:red"></text>
</view>
效果如下:




字体图标跟字体一样,可以通过font-size来改变大小,通过指定color来改变他的颜色。


总结:到这里微信小程序的字体图标的使用就完成了,这里经过转换成64位编码之后,直接将样式放在css文件中即可,并不需要引入其他以外的文件,相当简洁。



附上css全部代码:

/* This stylesheet generated by Transfonter (https://transfonter.org) on July 3, 2017 11:03 AM */

@font-face {
	font-family: 'iconfont';
	src: url(data:font/truetype;charset=utf-8;base64,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IyA8IC4jOLEkARQrLbA6LLEJBCVCsAAWsAQlsAQlIC5HI0cjYSCwBCNCsAZFKyCwYFBYILBAUVizAiADIBuzAiYDGllCQiMgR7AEQ7CAYmAgsAArIIqKYSCwAkNgZCOwA0NhZFBYsAJDYRuwA0NgWbADJbCAYmGwAiVGYTgjIDwjOBshICBGI0ewACsjYTghWbEkARQrLbA7LLAuKy6xJAEUKy2wPCywLyshIyAgPLAEI0IjOLEkARQrsARDLrAkKy2wPSywABUgR7AAI0KyAAEBFRQTLrAqKi2wPiywABUgR7AAI0KyAAEBFRQTLrAqKi2wPyyxAAEUE7ArKi2wQCywLSotsEEssAAWRSMgLiBGiiNhOLEkARQrLbBCLLAJI0KwQSstsEMssgAAOistsEQssgABOistsEUssgEAOistsEYssgEBOistsEcssgAAOystsEgssgABOystsEkssgEAOystsEossgEBOystsEsssgAANystsEwssgABNystsE0ssgEANystsE4ssgEBNystsE8ssgAAOSstsFAssgABOSstsFEssgEAOSstsFIssgEBOSstsFMssgAAPCstsFQssgABPCstsFUssgEAPCstsFYssgEBPCstsFcssgAAOCstsFgssgABOCstsFkssgEAOCstsFossgEBOCstsFsssDArLrEkARQrLbBcLLAwK7A0Ky2wXSywMCuwNSstsF4ssAAWsDArsDYrLbBfLLAxKy6xJAEUKy2wYCywMSuwNCstsGEssDErsDUrLbBiLLAxK7A2Ky2wYyywMisusSQBFCstsGQssDIrsDQrLbBlLLAyK7A1Ky2wZiywMiuwNistsGcssDMrLrEkARQrLbBoLLAzK7A0Ky2waSywMyuwNSstsGossDMrsDYrLbBrLCuwCGWwAyRQeLABFTAtAABLuADIUlixAQGOWbkIAAgAYyCwASNEILADI3CwDkUgIEu4AA5RS7AGU1pYsDQbsChZYGYgilVYsAIlYbABRWMjYrACI0SzCgkFBCuzCgsFBCuzDg8FBCtZsgQoCUVSRLMKDQYEK7EGAUSxJAGIUViwQIhYsQYDRLEmAYhRWLgEAIhYsQYBRFlZWVm4Af+FsASNsQUARAAAAAAAAAAAAAAAAAAAAAAAAAAAMgAyAxj/4QNS/ywDGP/hA1L/LAAAAAAAAAAA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) format('truetype');
	font-weight: 500;
	font-style: normal;
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-search:before { content: "\e611"; }

.icon-youjiantou:before { content: "\e603"; }

.icon-daifukuan:before { content: "\e684"; }

.icon-daishouhuo:before { content: "\e642"; }

.icon-wode:before { content: "\e606"; }

.icon-icon:before { content: "\e64b"; }

.icon-diliweizhishezhi:before { content: "\e616"; }

.icon-daifahuo:before { content: "\e678"; }

.icon-daipingjia:before { content: "\e619"; }

.icon-shouye:before { content: "\e69d"; }




<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>`组件(但图标种类有限)
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值