在小程序中使用iconfont

在微信小程序中使用iconfont

在前端开发中，一定会用到iconfont，相对于图片来说，所占取的空间更加，更能节省性能

iconfont网址：

首先进入iconfont官网，输入你想要的图标

找到你想要的iconfont图标，点击购物车，进行添加

然后点击右上角的购物车，将选中的iconfont添加到自己的项目文件夹中

在左上角的资源管理中— 我的项目进入我的项目中

`重点来了，现在就是引入了，引入方式为两种，一种是线下引入，一种是线上引入方式`

线上引入
点击①中，先生成在线链接，同时要下载至本地，下载好的压缩包中，解压，然后将里面的iconfont.css的后缀改为wxss。并放到项目中
复制②中的代码，打开iconfont.wxss文件，替换掉如下图2中iconfont.wxss划线位置的代码，

线下的引用，不一样的是需要将下载好的iconfont中的压缩包中的iconfont.css，iconfont.woff，iconfont.woff2，iconfont.ttf都引入到项目中，不过还是得将iconfont.css的后缀改成wxss

最后无论线上还是线下都得在app.wxss中引用就可以了

线上的引用方式有一定可能的不稳定，但是引入的文件少。线下的引用方式稳定，但是需要比较多的文件
若是iconfot进行添加的话，线上的@face的代码得更新，线下的更换引入的文件

在小程序中使用iconfont相关推荐

如何在微信小程序中使用iconfont
开篇废话开发过小程序的童鞋肯定都会遇到这样的问题,当我们在小程序中使用iconfont官方推荐的方法插入字体时,我们总会得到一个打印机(滑稽).那么如何在小程序中正确的使用iconfont呢? 一. ...
微信小程序中使用iconfont(阿里矢量图标字体)
在微信小程序中使用 iconfont 主要有两种方式,第一种是使用 Font class 方式,第二种是使用 Unicode 方式. 方式一:Font class 方式 1. 在 http://ico ...
在微信小程序中使用iconfont
微信小程序上使用iconfont的方法一.选取需要的icon 二.在微信小程序中使用iconfont 三.其他一.选取需要的icon 1.在iconfont上选取自己所需要的图标,然后添加到库内 ...
微信小程序中使用iconfont图标
方案一: 利用小程序中不支持 ttf 字体,却支持 base64 的特点,我们可以通过将 ttf 字体转码成 base64 ,再通过 iconfont 的特点,通过设置字体大小和颜色来达到目的. 具体 ...
在微信小程序中引入 Iconfont 阿里巴巴图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法一.下载图标首 ...
微信小程序中使用iconfont阿里巴巴矢量图标
1.首先去https://www.iconfont.cn中选择项目需要的图片,并且加入到购物车. 2.在购物车中将图标---添加至项目 3.选择Unicode -----查看在线链接 4.复制代码,下 ...
【uniapp-微信小程序】如何在微信小程序中使用iconfont字体包
在这里介绍一种使用ttf转Base64的方法在项目中引入iconfont字体包的过程 1. 获取字体包在阿里巴巴矢量图标库中,寻找合适的图标,然后将其添加至库中: 添加完想要的图标后,点击右上角的购 ...
微信小程序中使用 iconfont 图标的四种方法
1. 先去 iconfont 官网选择自己需要的图标,添加到项目中点击红框在浏览器中输入地址,得到的文件另存为 iconfont.wxss,放入项目的根目录下打开 app.wxss @impor ...
首页布局跟小程序如何配置Iconfont—小程序入门与实战（七）
4-1 经过上一章节的学习我们已经搭建了项目的整个框架,雏形已成.接下来我们只需要的往里面堆东西就可以了. 设计稿网址(14天分享有效,过期的可以找我拿): https://lanhuapp.com/ ...

在小程序中使用iconfont

在微信小程序中使用iconfont

`重点来了，现在就是引入了，引入方式为两种，一种是线下引入，一种是线上引入方式`

在小程序中使用iconfont相关推荐

最新文章

热门文章