微信小程序学习11：iconfont 网络字体图标使用（阿里巴巴）

使用方法

【1】 是直接下载图片，使用<image src="/static/images/v2.jpg"></image> 导入图片使用即可。

当然，不止image 组件可以导入图片，比如tabBar 底部导航栏等等

【2】 是通过 导入iconfont生成的css文件 ，再通过组件 class 属性调用图标。

优势是可以在wxss 调整颜色大小。

下面说明使用步骤

第一，通常创建在static文件夹创建iconfont，创建iconfont.wxss放置css文件，目录结构如下

第二，获取图标的CSS代码。登录iconfont官网：https://www.iconfont.cn

2.1 我们搜索一个删除图标

2.2把想要的图标加入库

2.3现在看网页右上角的购物车图标，点击

2.4点击添加到项目（没有就新建，可能要登录，没有印象了）

2.5 点击添加到项目就跳转到我的项目页面（也可以自己在【资源管理】打开）

第三、复制代码网页的css代码到iconfont.wxss 文件

iconfont.wxss

第四、iconfont文件引用

4.1在app.wxss导入，注意是项目的 app.wxss 导入

@import "/static/iconfont/iconfont.wxss";

4.2在 index.wxml 使用

<view class="indexContainer"><view class="navContainer"><text class="iconfont icon-shanchu1"></text></view>
</view>

class=“iconfont icon-shanchu1”

iconfont是导入名称

icon-shanchu1是相应图标类名

4.3 index.wxss

/* pages/index/index.wxss */.navContainer {display: flex;flex-direction: column;align-items: center;width: 20%;
}.iconfont {width: 100rpx;height: 100rpx;border-radius: 50%;text-align: center;line-height: 100rpx;font-size: 50rpx;/* 改变图标为红色 */color: rgb(240, 19, 19);margin: 20rpx 0;
}.navItem text {/* 图标类似字体，可以使用下面属性改变大小 */font-size: 26rpx;
}

第五、结果

微信小程序学习11：iconfont 网络字体图标使用（阿里巴巴）相关推荐

微信小程序中使用iconfont(阿里矢量图标字体)
在微信小程序中使用 iconfont 主要有两种方式,第一种是使用 Font class 方式,第二种是使用 Unicode 方式. 方式一:Font class 方式 1. 在 http://ico ...
微信小程序中使用阿里矢量字体图标
阿里矢量图库<----地址第一步: 第二步: 第三步: 第四步: 第五步:
微信小程序学习（1）-基础开发
学习微信小程序微信小程序学习(1) 微信小程序学习(2) 文章目录学习微信小程序注册和初始化小程序配置 tabbar导航栏模板插样与WXML 循环渲染条件渲染模板微信小程序脚本WXS ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习：（二）app.js及index.js详解
微信小程序学习:(二)app.js及index.js详解项目地址:https://github.com/leoricding/- 在用ide创建小程序项目时,系统默认为我们创建了一个hellowor ...
2020微信小程序学习报告.2.17-3.1.（三）
微信小程序学习报告应学校课程要求,特此记录首先,小程序知识点: wx.request的使用:发https请求,一个小程序同时只能有5个网络请求,https的参数里,url是接口地址,method是请求 ...
微信小程序导入其他字体会不会影响运行_微信小程序是否可以引用特殊字体
微信小程序是否可以引用特殊字体可以引用特殊字体. 具体的方法如下: 方法一: 转base64格式 1.下载要使用的字体,建议TTF格式 2.打开网站 https://transfonter.org/ ...
微信小程序学习之路（一）
微信小程序学习之路(一) 1.前言 2.准备工作 (1).IDE的选择 (2).微信小程序的文件说明 (3)开发者用户注册 3.编写 (1).新建项目 (2).代码的编写 3.代码的发布以及审核 1. ...
微信小程序自学笔记-----文本和字体样式设置
微信小程序自学笔记-----文本和字体样式设置用于自己自学微信小程序知识点总结,新手小白一枚,请大佬勿喷知识要点 · 各种字体样式属性命名及含义 · 利用style和class设置字体样式的方法 ...

微信小程序学习11：iconfont 网络字体图标使用（阿里巴巴）

微信小程序学习11：iconfont 网络字体图标使用（阿里巴巴）

微信小程序学习11：iconfont 网络字体图标使用（阿里巴巴）相关推荐

最新文章

热门文章