1. 打开 http://www.iconfont.cn/

2. 选择我们喜欢的图标，点击上面的小车，加入图标库，即右侧的购物车

3.点击购物车，点击下载代码

4.解压下载的文件夹，将文件夹复制到 assets文件夹中

4.引用iconfont.css

<style>

@import '../assets/icon/iconfont.css';    // 引用 iconfont.css

</style>

5.在用到图标的组件中写：

    <i class="icon iconfont icon-hehuoren"></i>

这样就可以引用到你想要的iconfont图标啦

如何在vue项目中引入阿里巴巴的iconfont图库的更多相关文章

  1. 如何在Vue项目中引入jQuery?

    假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...

  2. 详解如何在vue项目中引入饿了么elementUI组件

    在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库:https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体说 ...

  3. 如何在vue项目中引入elementUI组件

    个人博客同步文章 https://mr-houzi.com/2018/02/... 前提:已经安装好Vue 初始化vue vue init webpack itemname 运行初始化demo 运行一 ...

  4. 如何在vue项目中引入element-ui

    安装 elementUI npm install element-ui --save 引入elementUI import ElementUI from 'element-ui' import 'el ...

  5. vue项目中引入Sass

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...

  6. 如何在Vue项目中给路由跳转加上进度条

    1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...

  7. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  8. 在vue项目中引入jquery

    在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...

  9. 如何在Vue项目中使用Typescript

    0.前言 本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发.本指南非常灵活,它可以将TypeScript集成到现有的Vue项目中任何一个阶段. 1.初始化项目 首先,创建一个新 ...

随机推荐

  1. ArrayAccess（数组式访问）

    实现该接口后,可以像访问数组一样访问对象. 接口摘要: ArrayAccess { abstract public boolean offsetExists ( mixed $offset ) abs ...

  2. react-router 4.x 路由按需加载

    react-router 4 代码分割(按需加载) 官方文档  https://serverless-stack.com/chapters/code-splitting-in-create-react ...

  3. anaconda镜像

    下载一个包老是下载不下来,于是放弃了官方版改为国内镜像. 清华镜像 (打开Anaconda Prompt   或者 打开cmd,运行下面的命令) conda config --add channels ...

  4. Linux 下 Bash 脚本对拍

    背会... #!/bin/bash i= while true ;do ./maker > data.in ./a <data.in> data.out ./b <data.i ...

  5. Python面向对象之面向对象基本概念

    面向过程和面向对象概念 过程和函数:过程类似于函数,只能执行,但是没有返回结果:函数不仅能执行,还能返回结果. 面向过程和面向对象 基本概念 面向过程-怎么做 把完成某一个需求的所有步骤从头到尾逐步实 ...

  6. JUnit 深入

    Fixture 何谓 Fixture ?它是指在执行一个或者多个测试方法时需要的一系列公共资源或者数据,例如测试环境,测试数据等等.在编写单元测试的过程中,您会发现在大部分的测试方法在进行真正的测试之 ...

  7. [luoguP2875] [USACO07FEB]牛的词汇The Cow Lexicon（DP）

    传送门 f[i] 表示前 i 个字符去掉多少个 的最优解 直接暴力DP ——代码 #include <cstdio> #include <cstring> #include & ...

  8. N的阶乘 mod P

    基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 输入N和P(P为质数),求N! Mod P = ? (Mod 就是求模 %)   例如:n = 10, P = 11,10 ...

  9. 这段百度问答，对我相关有对啊！！！----如何获取Windows系统登陆用户名

    如何获取Windows系统登陆用户名 http://zhidao.baidu.com/link?url=Hva9PkVwYZv8KSEWftSqTWe8fqM1dhoq59BurnfADmcOvFjF ...

  10. [bzoj1507][Usaco2009 Hol]Transmission Delay 传输谍延时_动态规划

    Transmission Delay 传输谍延时 bzoj-1581 Usaco-2009 Hol 题目大意:题目链接. 注释:略. 想法: 动态规划. 首先我们考虑从后往前dp.(最近好多题都是从后 ...