uni-app引入阿里iconfont
前言:
目前正在通过 UNI-APP平台开发移动应用,uni-app平台是去年年出才创建的一个新品台,因此资源相对比较匮乏,在此遇到一个问题,一直使用别人提供的iconfont,但总是不够用,为了解决这个问题,花了些时间给自己也搞了个字体库,如何操作,请看下文。
准备:
阿里巴巴提供资源网址:https://www.iconfont.cn/
参考文档:
https://www.cnblogs.com/xguoz/p/10245641.html
操作:
一、进入网站(长得就是下图这个样子):

二、搜索自己需要的资源,并添加到自己的项目当中。
1. 项目在哪,看下图,如果没有项目自己可以快速创建一个项目,项目我的理解就是一个分类的文件夹。

2. icon怎么添加到项目中。
点击图标 -> 加入库 -> 添加到项目。
三、打开我的项目:

1、点击下方的 " 下方新icon....." 红色字体,生成字体代码。
2、选择Unicode。

3、下载到本地。

4、下载的资源解压打卡,拷贝 "iconfont.css"到你们项目中。
5、将iconfont.css中的 @font-face 替换成网络资源,//at 前全部替换成 https: //at........,如下图,保存。

6、iconfont.css 添加如下内容(图标可以通过text view button等组件引用)。
text[class*="icon-"],
view[class*="icon-"],
button[class*="icon-"] {
font-family: "iconfont";
font-size: inherit;
font-style: normal;
}
7、资源文件已经处理好了,开始引用,可以全局应用(在app.vue中style中添加引用),也可以局部引用(指定.vue中的style中添加引用)。
到此完成。
技术讨论群: 792344396
uni-app引入阿里iconfont的更多相关文章
- uni-app 引入本地iconfont的正确姿势以及阿里图标引入
1.引入本地iconfont iconfont文件里面包含 iconfont.ttf.iconfont.css, 将 iconfont.tt64文件转位 base64.推荐转换工具地址:https:/ ...
- uni-app在线引入阿里字体图标库
第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in ...
- VUE 引入阿里图标库
本身项目是VUE, Element-UI项目, 所以内置Element-UI图标库 地址如下, https://element.eleme.cn/#/zh-CN/component/icon 使用时: ...
- day 51 阿里iconfont的使用
阿里iconfont的使用 1. 找到阿里巴巴图标库 2.找到图标 3.搜索你想要的图标 4.将图标添加到购物车 5.点击右上角的购物车按钮,我这里添加了两个. 6.提示你登陆,不需要花钱,找其中 ...
- uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
- vue安装openlayers,jquery,bootstrap,阿里iconfont,
安装 安装openlayers安装指定包安装openlayersVUE中的地图import ol from "openlayers";import "openlayers ...
- Hexo-使用阿里iconfont图标
Hexo-使用阿里iconfont图标 因为使用hexo搭建的博客中,大家并不懂都有什么图标,fa fa-xx就懵了,不知道都有什么. 首先,fa fa-xxx中的图标可以在 图标库 中寻找. (上面 ...
- vue-cli创建的项目打包成app引入字体图标的问题
将项目在手机端调试时,发现引入的阿里图标显示不出来,需要在引入的iconfont.css文件夹里给url加上https
- vue 中使用阿里iconfont彩色图标
在main.js中 import './assets/images/iconfont/iconfont.css'import './assets/images/iconfont/iconfont.js ...
随机推荐
- Java 递归解决 "仅仅能两数相乘的计算器计算x^y" 问题
/** * 求一个数的乘方 * 求x^y,y是一个正整数. 设计算器仅仅能计算两数相乘,不能一次计算n个数相乘. * 知:2^5=(2^2)^2*2; 2^6=(2^2)^3=((4)^2)*4; 2 ...
- 【POJ 3292】 Semi-prime H-numbers
[POJ 3292] Semi-prime H-numbers 打个表 题意是1 5 9 13...这样的4的n次方+1定义为H-numbers H-numbers中仅仅由1*自己这一种方式组成 即没 ...
- 走入asp.net mvc不归路:[1]项目文件结构
先来了解一下一个asp.net mvc项目的文件结构. 1 项目文件结构一览 2 mvc,顾名思义,一个项目中最重要的就是这三个东西:M(Model,模型),V(View,视图),C(Controll ...
- Android(Linux)模拟按键、触摸屏等事件
前提: 在我们应用程序或者在写Android自己主动化測试时候经常会须要模拟实体按键,来给我们做測试用.这也是我要整理的目的. 基本的涉及的是Linux Input Event事件. 下面的样例基于A ...
- Apache Qpid CPP的编译与安装
单机Broker部署(windows/linux) 在Windows/Linux上部署QPID Broker的方法. Windows 需要预先准备的文件和程序 qpid-cpp-0.32.tar.gz ...
- HDU 4085 Peach Blossom Spring 斯坦纳树 状态压缩DP+SPFA
状态压缩dp+spfa解斯坦纳树 枚举子树的形态 dp[i][j] = min(dp[i][j], dp[i][k]+dp[i][l]) 当中k和l是对j的一个划分 依照边进行松弛 dp[i][j] ...
- T-SQL查询进阶--变量
概述 变量对于一种语言是必不可少的一部分,当然,对于T-SQL来讲也是一样.在简单查询中,往往很少用到变量,但无论对于复杂的查询或存储过程中,变量都是必不可少的一部分. 变量的种类 在T-SQL中,变 ...
- thinkphp Class 'PDO' not found 错误
thinkphp Class 'PDO' not found 错误,原因mysql5.7.26缺少pdo驱动,需要安装php的pdo和pdo_mysql扩展 本文以centOS为例 1.进入PHP源码 ...
- Java中的文件上传和下载
文件上传原理: 早期的文件上传机制: 在TCP/IP中.最早出现的文件上传机制是FTP.他是将文件由客户端发送到服务器的标准机制. jsp中的文件上传机制: 在jsp编程中不能使用FTP的方法来上传文 ...
- ResultSetMetaData类的介绍
ResultSetMetaData .DatabaseMetaData中的方法介绍 利用ResultSet的getMetaData的方法可以获得ResultSetMeta对象,而ResultSetMe ...