1、将iconfont中需要的图标，添加到购物车，然后添加到自己的项目。生成在线代码。



2、点击下载至本地。然后解压后复制 iconfont.css 文件到你的项目。

3、复制第一步生成的代码，替换iconfont.css中的@font-face，然后再在//.at前边添加https:

4、再App.vue中引入iconfont.css文件

@import  url('static/iconfont/iconfont.css'); // 路径根据自己而定

5、使用图标

<span class="iconfont icon-xxx"></span>   //xxx代表图标的名字

uniapp如何使用阿里iconfont的更多相关文章

  1. vue 中使用阿里iconfont彩色图标

    在main.js中 import './assets/images/iconfont/iconfont.css'import './assets/images/iconfont/iconfont.js ...

  2. day 51 阿里iconfont的使用

    阿里iconfont的使用   1. 找到阿里巴巴图标库 2.找到图标 3.搜索你想要的图标 4.将图标添加到购物车 5.点击右上角的购物车按钮,我这里添加了两个. 6.提示你登陆,不需要花钱,找其中 ...

  3. Hexo-使用阿里iconfont图标

    Hexo-使用阿里iconfont图标 因为使用hexo搭建的博客中,大家并不懂都有什么图标,fa fa-xx就懵了,不知道都有什么. 首先,fa fa-xxx中的图标可以在 图标库 中寻找. (上面 ...

  4. uni-app引入阿里iconfont

    前言: 目前正在通过 UNI-APP平台开发移动应用,uni-app平台是去年年出才创建的一个新品台,因此资源相对比较匮乏,在此遇到一个问题,一直使用别人提供的iconfont,但总是不够用,为了解决 ...

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

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

  6. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  7. uniapp - 如何申请阿里云存储

    长话短说,简略表述 1. 登录阿里云,选择 oos对象云存储 https://oss.console.aliyun.com/overview 2. 新建“Bucket”,名称是唯一的(建议用公司或者个 ...

  8. vue安装openlayers,jquery,bootstrap,阿里iconfont，

    安装 安装openlayers安装指定包安装openlayersVUE中的地图import ol from "openlayers";import "openlayers ...

  9. 阿里iconfont引入方法

    原文:iconfont的引入方法   第一步:使用font-face声明字体@font-face {font-family: 'iconfont';src: url('iconfont.eot'); ...

随机推荐

  1. 最小生成树&&次小生成树

    对于一个边上具有权值的图来说,其边权值和最小的生成树叫做图G的最小生成树 求无向图最小生成树主要有prim和kruskal两种算法 1.prim 将点集V分成Va和Vb两部分,Va为已经连入生成树的点 ...

  2. 部署web前端的react项目到linux服务器

    部署web前端的react项目到linux服务器 项目的目录结构 ``` ├─dlls #dlls编译后的问题 ├─doc #帮助文件入口 │ ├─src │ ├─apps #各个功能模块放在这里 │ ...

  3. 修改history记录数

    在linux系统下.history命令会保存多少条命令呢?曾在一本书上说,如果注销系统,那么会将所有的历史命令都定入到~/.bash_history, 但只保留1000条命令(这个是由默认的shell ...

  4. 简记乘法逆元（费马小定理+扩展Euclid）

    乘法逆元 什么是乘法逆元? 若整数 \(b,m\) 互质,并且\(b|a\) ,则存在一个整数\(x\) ,使得 \(\frac{a}{b}\equiv ax\mod m\) . 称\(x\) 是\( ...

  5. Spring框架IOC解说

    控制反转——Spring通过一种称作控制反转(IoC)的技术促进了松耦合.当应用了IoC,一个对象依赖的其它对象会通过被动的方式传递进来,而不是这个对象自己创建或者查找依赖对象.你可以认为IoC与JN ...

  6. Docker安装redis3.2

    1.拉取redis3.2镜像 2.使用docker images查看拉去下来的镜像 3.运行容器,命令如下 docker run -p : -v $PWD/data:/data -d redis:3. ...

  7. Linux设备驱动程序 之 中断

    中断 中断使得硬件可以发出通知给处理器,本质上是一种特殊的电信号,由硬件设备发向处理器,处理器接收到中断后,会马上向操作系统反应此信号的到来,然后就由操作系统负责处理这些新来的数据:硬件设备生成中断并 ...

  8. 连接Android模拟器

    一.如何找到adb?    安装夜神安卓模拟器后,电脑桌面会有“夜神模拟器”的启动图标,鼠标右键--打开文件所在的位置,就会进入***\Nox\bin,默认路径是C:\Program Files (x ...

  9. WIN7+QT5.2.0 连接oracle11g问题及解决方法

    用下面的代码建立连接之后,出现了几个问题 //连接数据库 QSqlDatabase db = QSqlDatabase::addDatabase("QOCI"); /**连接Ora ...

  10. python连接mysql数据库（MySQL）

    在介绍python在数据库中的操作之前先简单介绍点mysql中的操作语言: [root@elk-server --]# mysql -u root -p Enter password: Welcome ...