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. LibreOJ #119. 最短路

    二次联通门 : LibreOJ #119. 最短路 /* LibreOJ #119. 最短路 堆优化的Dijkstra */ #include <cstring> #include < ...

  2. 整理的 linux常用发行版 openstack images 下载地址

    常见的Linux发行版本官方都提供了用于云环境(如OpenStack)的Image的下载. 发行版 下载地址 fedora 30 http://mirrors.ustc.edu.cn/fedora/r ...

  3. Android studio 导入项目报 Error:Cause: peer not authenticated 异常

    修改build.gradle文件(project级的) 一.dependencies { classpath 'com.android.tools.build:gradle:1.0.1'}将class ...

  4. 下载安装 binary editor

    http://www.eecanalyzer.net/downloads

  5. C# 窗体 类似framest 左侧点击右侧显示 左侧菜单右侧显示

    首先托一个splitContainer调节大小位置 然后进行再新创建一个窗体名为add 在左侧拖入button按钮 进入代码阶段 更改属性 public Main() { InitializeComp ...

  6. zip flags 1 and 8 are not supported解决方案

    原因是因为使用了mac自带的软件打包成了zip,这种zip包unzip命令无法解压的. 所以解决方案就是使用zip命令进行压缩,zip -r 目标文件 源文件

  7. 去除IntelliJ IDEA对重复代码的检测

    方法1:  方法2:(比较简便) 

  8. iTerm 2打造ssh完美连接Linux服务器快捷方法

    iTerm 2打造ssh完美连接Linux服务器快捷方法 2019年05月02日 10:40:19 Mars0908 阅读数 213更多 个人分类: Mac下开发   版权声明:本文为博主原创文章,遵 ...

  9. react native Expo适配全面屏/Expo识别全面屏和正常屏

    一.最新版本的expo已经默认支持了全面屏,即不会像react native cli一样出现底部黑边 二.但是全面屏通过Dimensions.get('window')获取的高度还是不准确,因为全面屏 ...

  10. Python在for循环中更改list值的方法

    一.在for循环中直接更改列表中元素的值不会起作用: 如: l = list(range(10)[::2]) print (l) for n in l: n = 0 print (l) 运行结果: [ ...