一、选好图标后在APP.vue中进行配置

<style lang='scss'>/*全局公共样式和字体图标*/@font-face {font-family: "iconfont";font-weight: normal;font-style: normal;src: url('https://at.alicdn.com/t/font_2308342_84cfdl9mpt.ttf') format('truetype');}
</style>

主要是src的地址，iconfont上给的是不加https:的，这块需要我们自己给加上，不然在小程序真机的时候会出现不显示的情况

二、添加图标的css，可以外链，我这里直接内嵌进来的

（1）把提供的地址在浏览器打开

（2）复制我们需要的css代码，这里我直接给各位看复制之后的吧

<style lang='scss'>/*全局公共样式和字体图标*/@font-face {font-family: "iconfont";font-weight: normal;font-style: normal;src: url('https://at.alicdn.com/t/font_2308342_84cfdl9mpt.ttf') format('truetype');}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;color: #ff0026;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-shezhi:before {content: "\e648";}.icon-shangpin:before {content: "\e6a4";}.icon-fangxinjiaoyi:before {content: "\e6e8";}.icon-zhengpinbaozheng:before {content: "\e6f4";}.icon-qitianwuliyoutuihuan:before {content: "\e63d";}.icon-48xiaoshi:before {content: "\e765";}.icon-weixinzhifu:before {content: "\e60c";}
</style>

三、页面上的使用

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

哪里不清楚我们可以在评论区探讨，欢迎大家评论转发！

uniapp引用iconfont字体图标相关推荐

uniapp使用iconfont字体图标
本文介绍两种方案:一.使用iconfont字体图标二.使用icon图片情景1:使用灰色的字体图标方案一:使用iconfont字体图标步骤1:下载iconfont 步骤2:解压后只需要将ifon ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
在HTML种引用阿里巴巴iconfont字体图标
概述什么是阿里巴巴iconfont字体图标呢? iconfont字体图标就是用字体来代替图标.图片文件的做法,并且通过字体图标可以对图标的大小.颜色等进行控制. 以前要引用各种图标需要使用的是图标图 ...
iconfont字体图标的使用方法
今天来谈谈iconfont字体图标的使用方法一.打开阿里巴巴矢量图官网阿里巴巴矢量图官网界面如下: 二.选择登录:可以使用GitHub账号登录,用其他账号也可以这里我选择用GitHub账号登录 ...
iconfont 字体图标
目前国内使用最多的是iconfont-阿里巴巴字体矢量图标库, 字体图标主要显示网页中通用常用的一些小图标iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标 ...
在 uni-app 中使用字体图标
在 uni-app 中使用字体图标下载iconfont字体图标进入 iconfont 官网本地下载图标文件压缩包解压出来在uni-app 项目static 下新建 fonts 文件夹 ...
使用阿里巴巴图标库生成iconfont字体图标
iconfont字体图标就是用字体来代替图标.图片文件的做法,并且通过字体图标可以对图标的大小.颜色等进行控制,但是缺点就是只能实现一种颜色,不能像图片那样含有各种颜色. 通过阿里巴巴图标库制作字体图 ...
uni-app之阿里字体图标转base64方法
uni-app之阿里字体图标转base64方法 uni-app开发过程中发现小程序端不能直接使用字体图标,需先转成base65方可使用,转换方式如下. 一.转换步骤 1.1 从iconfont下载字体 ...
【uniapp引入阿里字体图标】
uniapp引入阿里字体图标引入阿里字体图标引入阿里字体图标链接奉上 uni-app字体图标阿里图标官网 nvue中不可直接使用 css 的方式引入字体文件,需要使用以下方式在 js 内引入. ...
vue-cli打包apk iconfont字体图标不显示问题
vue移动端项目打包apk,发现iconfont字体图标不显示,第一反应是引用的文件路径不对: 在网上查找资料后,解决方法: 找到build>utils.js文件,如图所示位置加上publicP ...

uniapp引用iconfont字体图标

一、选好图标后在APP.vue中进行配置

主要是src的地址，iconfont上给的是不加https:的，这块需要我们自己给加上，不然在小程序真机的时候会出现不显示的情况

二、添加图标的css，可以外链，我这里直接内嵌进来的

（1）把提供的地址在浏览器打开

（2）复制我们需要的css代码，这里我直接给各位看复制之后的吧

三、页面上的使用

uniapp引用iconfont字体图标相关推荐

最新文章

热门文章