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. c# Dictionary 扩展方法

    主要用于接口请求,数据转换 #region Dictionary 扩展方法 public static string getString(this Dictionary<string, stri ...

  2. block: cfq 学习01

    CFQ,即Completely Fair Queueing绝对公平调度器,力图为竞争块设备使用权的所有进程分配一个等同的时间片,在调度器分配给进程的时间片内,进程可以将其读写请求发送给底层块设备,当进 ...

  3. C++ volatile关键字（转）

    文章来源: http://hedengcheng.com/?p=725 https://www.cnblogs.com/god-of-death/p/7852394.html 1.基本概念 volat ...

  4. Cash Machine POJ - 1276

    解法 多重背包板子题 多重背包板子 如果上限的体积大于了给定的体积那么套完全背包 否则二进制优化成01背包 代码 #include <iostream> #include <cstr ...

  5. ubuntu解压zip文件出现乱码情况解决方法

    使用 unzip datastructure.zip 出现下面的情况: extracting: └╧╗╞/╗·╞ў╤з╧░╝п╜ї/╩¤╛▌╜с╣╣╙ы╦у╖и/╩¤╛▌╜с╣╣╙ы╦у╖иги2гй ...

  6. 用php生成HTML文件的类

    目的 用PHP生成HTML文档, 支持标签嵌套缩进, 支持标签自定义属性 起因 这个东西确实也是心血来潮写的, 本来打算是输出HTML片段用的, 但后来就干脆写成了一个可以输出完整HTML的功能; 我 ...

  7. 省市区json结构

    [ { "label": "北京市", "value": "北京市", "children": [ ...

  8. js之标签操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Spring Tool Suite 安装

    第一步:到http://spring.io/tools/sts/all/上下载对应版本.(此处以博主Windows64位系统为例) 第二步: 进入eclipse,依次点击help-->Insta ...

  10. Java基础学习总结（77）——Java枚举再总结

    在Java SE5之前,我们要使用枚举类型时,通常会使用static final 定义一组int常量来标识,代码如下 public static final int MAN = 0; public s ...