微信小程序中使用 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 的方法 一.下载图标 首 ...
最新文章
- 胜者树和败者树 - qianye0905 - 博客园
- Java技术体系平台
- webpack打包后自动弹出浏览器查看效果
- QueueToStack
- 【Windows8系统控制面板和电脑设置在哪个位置】
- NYOJ_5739最大岛屿(河南省第八届acm程序设计大赛)
- 在Tomcat下http协议转https协议
- MFC通过对话框窗口句柄获得对话框对象指针
- 【SpringBoot】解决拦截器注入 Service 为空问题
- ssm电影院订票系统 前端layui
- 华为手机更改系统默认字体
- 计算机软件lumion的使用例子,Lumion怎么用？BIM软件教学：带你掌握Lumion实战应用...
- PHP 对接阿里云短信
- powershell和cmd区别
- 【程序员笑话】让你泪流满面的瞬间
- 计算机的基本配件图片,计算机硬件的重要部件
- 基于深度学习的表面缺陷检测方法综述-论文阅读笔记
- 51单片机实现的双机通信设计仿真
- Quartus Prime v18.1 standard-QuartusPrimeV18.1标准版安装过程
- 博途v15安装过程中提示出错_博图v15安装出错