微信小程序中使用 iconfont 图标的四种方法

1. 先去 iconfont 官网选择自己需要的图标，添加到项目中

点击红框

在浏览器中输入地址，得到的文件另存为 iconfont.wxss，放入项目的根目录下

打开 app.wxss

@import "iconfont.wxss"

现在分两种情况，第一种是在 pages 下的 .wxml 中使用，第二种是在 components 下的 .wxml 中使用。

第一种

<text class="iconfont icon-fabu"></text>

后面的名称可以在 iconfont 的项目里面复制

第二种

<i class="iconfont icon-linedesign-12 find"></i>

引入的方法一样的，需要的相对应的组件的 js 文件里面进行配置

options: {styleIsolation: 'apply-shared'
},

还有一种方法

在调用组件的地方

<x-search iconfont="iconfont" icon-sousuo="icon-sousuo" />

加上这样的两个配置，在相对应的组件的 js 文件里面

externalClasses: ['iconfont','icon-sousuo',
],

或者第三种方法，将 iconfont.wxss 文件复制一份，然后放在相对应的组件中，在组件的 wxss文件中引入即可。

关注公众号：大明贵妇，无套路获取前端学习资料，期待各位客官来临

微信小程序中使用 iconfont 图标的四种方法相关推荐

微信小程序中使用iconfont图标
方案一: 利用小程序中不支持 ttf 字体,却支持 base64 的特点,我们可以通过将 ttf 字体转码成 base64 ,再通过 iconfont 的特点,通过设置字体大小和颜色来达到目的. 具体 ...
微信小程序中使用iconfont(阿里矢量图标字体)
在微信小程序中使用 iconfont 主要有两种方式,第一种是使用 Font class 方式,第二种是使用 Unicode 方式. 方式一:Font class 方式 1. 在 http://ico ...
在微信小程序中使用iconfont
微信小程序上使用iconfont的方法一.选取需要的icon 二.在微信小程序中使用iconfont 三.其他一.选取需要的icon 1.在iconfont上选取自己所需要的图标,然后添加到库内 ...
微信小程序中使用阿里巴巴图标库
这里写自定义目录标题微信小程序中使用阿里巴巴图标库第一步第二步第三步微信小程序中使用阿里巴巴图标库第一步阿里巴巴图标正常加入自己的项目,并下载到本地: 注意:这里的选择 ![在这里插入图 ...
在微信小程序中使用字体图标
方法一:转化为base64 第一步:在阿里巴巴矢量图标库下载需要的图标 QQ截图20180316191514.png 点击下载代码,将下载后的download.zip解压第二步:进入https:// ...
在Vue项目和微信小程序中使用阿里图标
文章目录在vue项目中正确使用iconfont的方法 1.打开 iconFont官网选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至我的项目 3.点击font-class.下载至本地,一 ...
如何在微信小程序中使用iconfont
开篇废话开发过小程序的童鞋肯定都会遇到这样的问题,当我们在小程序中使用iconfont官方推荐的方法插入字体时,我们总会得到一个打印机(滑稽).那么如何在小程序中正确的使用iconfont呢? 一. ...
微信小程序中图片占满整个屏幕实现方法
将body和html设置为100%,这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦. 但是在微信小程序中,是没有dom对象的,根节点是page,使用pag ...
在微信小程序中引入 Iconfont 阿里巴巴图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法一.下载图标首 ...

微信小程序中使用 iconfont 图标的四种方法

1. 先去 iconfont 官网选择自己需要的图标，添加到项目中

点击红框

在浏览器中输入地址，得到的文件另存为 iconfont.wxss，放入项目的根目录下

打开 app.wxss

现在分两种情况，第一种是在 pages 下的 .wxml 中使用，第二种是在 components 下的 .wxml 中使用。

第一种

后面的名称可以在 iconfont 的项目里面复制

第二种

引入的方法一样的，需要的相对应的组件的 js 文件里面进行配置

还有一种方法

在调用组件的地方

加上这样的两个配置，在相对应的组件的 js 文件里面

或者第三种方法，将 iconfont.wxss 文件复制一份，然后放在相对应的组件中，在组件的 wxss文件中引入即可。

微信小程序中使用 iconfont 图标的四种方法相关推荐

最新文章

热门文章