糯麦 糯麦

糯麦科技

/

新闻资讯

/

技术讨论

/

微信小程序引入icon字体图标

微信小程序引入icon字体图标

原创 新闻资讯

于 2023-08-21 09:58:24 发布

750 浏览

其它前端项目只需要引入iconfont字体图标文件,由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图标就会稍有不同,其实只需要把平时的iconfont字体图标远程路径换成base64引入,就可以解决小程序引入iconfont字体图标这个问题了,下面糯麦为大家手把手演示微信小程序如何引入第三方icon字体图标,以引入iconfont图标库为例,希望对大家有一定的帮助。


一、https://www.iconfont.cn/ 下载需要的图标

1:将想要的图标添加入库:


1.jpg


2:进入图标购物车,选择下载代码


2.jpg


3:下载成功的代码解压后,将得到以下文件列表


3.jpg


二、转换 ttf 文件为 base64

推荐去 https://transfonter.org 转换

1:配置选项,将配置改为如下红色框所示,并打开 Base64 encode 选项:


4.jpg


2:配置选项完成后,点击Add fonts按钮进行ttf文件上传,点击Convert按钮进行转换,转换成功后点击Download进行转换后的源文件下载


5.jpg


3:下载成功后,得到一个名为transfonter.org开头的压缩包,解压后得到三个文件,然后我们打开stylesheet.css文件


6.jpg


三、在小程序中使用

1.新建一个小程序项目,成功后可以自己建一个 resource 文件夹用来放字体图标等资源,并在根目录下新建一个 "iconfont.wxss" 的空白文件,这个wxss就是我们的字体图标文件,先将转化完成后下载下来的stylesheet.css文件中的所有代码全部复制进来


7.jpg


2:再讲最开始从图标库中下载解压的iconfont.css文件打开,复制所有以.icon-开头的伪元素代码至下方


8.jpg


3:添加以下代码到style.wxss中,用于图标引入时进行icon样式匹配过滤,其中font-family必须与顶部引入的@font-face中的font-family一致

[class^="icon-"], [class*=" icon-"] {
  font-family: 'iconfont' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

4:全局引入字体图标,打开项目根目录下的app.wxss文件,引入刚刚创建的iconfont.wxss,就可以在任意页面进行使用

@import '/iconfont.wxss';

5:代码中进行使用

<icon class="icon-28 icon-icon-test3"></icon>

以上就是糯麦为大家总结的如何在微信小程序中引入第三方icon文字图标代码的全部过程,微信小程序中引入第三方自定义字体原理与操作步骤一样,需要说明的是小程序体积限制有限,尽量压缩和引入必要的第三方资源,以免导致体积超过限制而无法运行的问题,希望可以对大家有所帮助

微信小程序

小程序开发

icon图标

阅读排行

  • 1. 几行代码就能实现Html大转盘抽奖

    大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。

    查看详情
  • 2. 微信小程序中父子组件相互调用详解

    在微信小程序中,组件化开发是一种重要的开发模式,它能够将复杂的界面拆分成多个独立的组件,使代码更容易维护和扩展。在组件化的开发中,父子组件之间的相互调用和传参是常见的需求。

    查看详情
  • 3. 微信订阅号与服务号之间的区别

    要想搭建微信生态相关营销推广程序,必须要注册一个微信公众号,而微信公众号又分为“订阅号、服务号、企业号”,这二者之间有什么区别?企业在账号注册时该如何根据需求进行选择?

    查看详情
  • 4. 微信小程序引入icon字体图标

    其它前端项目只需要引入iconfont字体图标文件,由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图标就会稍有不同,其实只需要把平时的iconfont字体图标远程路径换成base64引入就可以解决。

    查看详情
  • 5. 微信支付商户申请接入流程

    微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。

    查看详情