1 首先进入你的iconfont项目

很好, 看见圈圈的吗 , 我说蓝色的,记住了,选到这个 ,然后点击下载本地项目,

解压完就是这个了 ,然后把

圈起来的放到你的项目文件里面 ,记得引入的时候路径别错了,随便放,引入路径对了就行

https://www.giftofspeed.com/base64-encoder/

进入这个网站, 然后把刚刚解压的文件打开 找到

找不到?打死你 重新去官网下载,

然后把这个文件移入到桌面后, 打开上个网站选择文件选择刚刚你移入的那个iconfont.ttf

点击全选复制,

3 在项目里面打开刚刚放入的iconfont.css

@font-face {
font-family: "iconfont";
src: url(data:font/truetype;charset=utf-8;base64, 转换的base64内容 ) format('truetype');
}

 

把你自己文件的那个@font-face删除, 然后引入上面的代码 , 看见没圈起来的就是放你刚刚全选内容,这样字体倒是引入进来了, 然后你在APP.vue里面引入这个iconfont.css就好啦,

谢谢观看 ,

uni-app引入iconfont字体图标的更多相关文章

  1. 小程序入坑(一)---如何引入iconfont 字体图标

    最近一直忙于日常任务,其实是懒癌又犯了..........不过因为自己的“懒癌”,“不思进取”给自己挖了不少坑. 一,小程序工具的安装 打开简易小程序的官网https://mp.weixin.qq.c ...

  2. mpvue——引入iconfont字体图标

    前言 有问题可以随时提问,评论私信,只要我有时间我都会第一时间回复.当大家发现这篇文章不适用的时候烦请告知下,我好做好更改! 放置 下载好的字体图标放在static目录下,我是自己又创建了一个icon ...

  3. vue中引入第三方字体图标库iconfont,及iconfont引入彩色图标

    iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...

  4. uni-app在线引入阿里字体图标库

    第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in ...

  5. vue-cli 引入阿里巴巴字体图标:注意点

    vue-cli 引入阿里巴巴字体图标:注意点 下载的 iconfont.css 文件中: .iconfont { font-family:"iconfont" !important ...

  6. iconfont字体图标和各种CSS小图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  7. css 小图标 & iconfont 字体图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont 字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  8. iconfont字体图标的使用方法--超简单!

    我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐, ...

  9. 关于iconfont字体图标的使用

    今天用iconfont遇到了字体图标的使用问题.关于使用字体图标的方式在这里有介绍三种方式(css和js的引入和平时一样) 首先你要分清是用单个字体图标icon,还是多个字体图标icon 关于使用代码 ...

随机推荐

  1. Codeforces 1389 题解(A-E)

    AC代码 A. LCM Problem 若\(a < b\),则\(LCM(a,b)\)是\(a\)的整数倍且\(LCM(a,b) \ne a\),所以\(LCM(a,b) \ge 2a\),当 ...

  2. 10_Python的函数function

    1.函数的概述 1.函数是可以重复执行的语句块且可以重复调用,函数封装了可重复执行的语句提高了语句的可重复性     2.函数的参数和返回值的作用流程图: https://www.processon. ...

  3. 20190930-01 Redis的事务 000 031

  4. 跨年夜问题:一句并不复杂的delete竟然在delete statement处cost飙升,在数据量上升的十万级就像进入了死循环,执行后久久没有结果

    笔者使用的环境: # 类别 版本 1 操作系统 Win10 2 数据库 Oracle Database 11g Enterprise Edition Release 11.2.0.1.0 - 64bi ...

  5. TCP三次握手、四次挥手理解及可能问为什么?

    三次握手:  TCP3次握手连接:浏览器所在的客户机向服务器发出连接请求报文(SYN标志为1),此时,TCP客户端进程进入了 SYN-SENT(同步已发送状态)状态. 服务器接收报文后,同意建立连接, ...

  6. taro-script 0.4 发布,基于Taro v3的js解释器组件

    taro-script Github地址 基于Taro v3开发,支持多端小程序动态加载远程 JavaScript 脚本并执行,支持 ES5 语法 最近更新内容 新增useScriptContext获 ...

  7. 你必须要知道的babel二三事

    1. 什么是babel 本文基于的babel版本是7.11.6,本文所有示例github Babel is a toolchain that is mainly used to convert ECM ...

  8. Java反序列漏洞

    序列化:WriteObject 反序列化:readObject() Jd-gui.exe 最简单的打开java文件方式 Intellij idea 编辑工具 演示案例: WebGoat_Javaweb ...

  9. 云计算openstack共享组件——时间同步服务ntp(2)

    一.标准时间讲解 地球分为东西十二个区域,共计 24 个时区 格林威治作为全球标准时间即 (GMT 时间 ),东时区以格林威治时区进行加,而西时区则为减. 地球的轨道并非正圆,在加上自转速度逐年递减, ...

  10. 云计算openstack——云计算、大数据、人工智能(16)

    一.互联网行业及云计算 在互联网时代,技术是推动社会发展的驱动,云计算则是一个包罗万象的技术栈集合,通过网络提供IAAS.PAAS.SAAS等资源,涵盖从数据中心底层的硬件设置到最上层客户的应用.给我 ...