uniapp 引入iconfont的方法

uniapp 引入iconfont的方法
2022-09-06 22:36:30

uniapp 引入iconfont的方法_ico

文章目录

1. 加入购物车
2. 下载代码
3. 创建静态目录
4. 样式字体复制
5. 字体转码
6. 转码内容替换
7. 样式引入
7. 使用
8. 个性化使用

阿里图标库：https://www.iconfont.cn/

1. 加入购物车

选中自己需要的图标依次加入购物车

uniapp 引入iconfont的方法_css_02

2. 下载代码

打开购物车-下载代码到本地

uniapp 引入iconfont的方法_ico_03

uniapp 引入iconfont的方法_自定义_04

3. 创建静态目录

在uniapp项目中的static目录下面，新建iconfont文件夹用于存储图标，名称自定义

uniapp 引入iconfont的方法_图标引入_05

4. 样式字体复制

iconfont.css和iconfont.ttf

uniapp 引入iconfont的方法_css_06

5. 字体转码

将 iconfont.ttf文件转位 base64

转码地址：https://www.giftofspeed.com/base64-encoder/

uniapp 引入iconfont的方法_ico_07

选择转码内容

uniapp 引入iconfont的方法_图标引入_08

6. 转码内容替换

打开iconfont.css文件

uniapp 引入iconfont的方法_自定义_09

内容替换

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('data:application/x-font-woff2;charset=utf-8;base64,转码内容粘贴到这里');
}

uniapp 引入iconfont的方法_ico_10

7. 样式引入

<style lang="scss">
  /*每个页面公共css */
  @import '~@/static//iconfont/iconfont.css'
</style>

uniapp 引入iconfont的方法_图标引入_11

7. 使用

前面class =iconfont 是固定的，后面的具体class从iconfont.css文件中复制

<i class='iconfont icon-suoding'></i>
<i class='iconfont icon-shoucangxuanzhong'></i>

uniapp 引入iconfont的方法_css_12

uniapp 引入iconfont的方法_ico_13

uniapp 引入iconfont的方法_自定义_14

uniapp 引入iconfont的方法_css_15

8. 个性化使用

比如说，我的收藏图标是黄色的但是，图标默认是黑色，那就自己给图标加颜色就可以，大小，布局等样式都是一样的。

<i class='iconfont icon-suoding' style="color: darkgray;"></i>
<i class='iconfont icon-shoucangxuanzhong' style="color: aliceblue;"></i>

uniapp 引入iconfont的方法_ico_16

uniapp 引入iconfont的方法_ico_17

本文摘自：https://blog.51cto.com/g

开通会员，享受整站包年服务立即开通 >

uniapp 引入iconfont的方法2022-09-06 22:36:30