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. 调用微信扫一扫功能，踩坑'invalid signature'

    在vue项目中,调用微信扫一扫功能,在安卓系统下完全正常,ios系统下却报错'invalid signature'的错误,这可能令许多小伙伴困惑,经过查询大量博客相关资料,才找到了解决的方法. 原因: ...

  2. swift中tableview的使用和注意事项

    今天使用swift写了个简单的tableView,语法和用法上跟oc没多大的区别.但是还是有一些细节的地方需要注意一下的. 先上代码 import UIKit class ViewController ...

  3. Stuts2学习——HelloWorld

    这两天从对Struts一窍不通到成功运行HelloWorld,在SSH这条路上迈出了第一步. 下面我把我的第一个Struts程序放上来: 一.新建web project,配置文件等准备工作 1. 新建 ...

  4. js识别手机访问自动跳转到相应页面

    /* * 智能机浏览器版本信息: * */ var browser={ versions:function(){ var u = navigator.userAgent, app = navigato ...

  5. 子集和问题 - 回溯&搜索

    题目地址:http://www.51cpc.com/web/problem.php?id=4264 其实一看到这道题我就想到了01背包,但是卡死在了如何顺序输出: 个人人为回溯本身就会用到搜索,像是充 ...

  6. 每日命令：（6）rmdir

    今天学习一下linux中命令: rmdir命令.rmdir是常用的命令,该命令的功能是删除空目录,一个目录被删除之前必须是空的.(注意,rm - r dir命令可代替rmdir,但是有很大危险性.)删 ...

  7. Python基础之变量进阶

    变量的引用 变量和数据都是保存在内存中的: 在python中函数的参数传递以及返回值都是靠引用传递的. 函数引用的概念 在python中 变量和数据时分开存储的: 数据保存在内存中的一个位置: 变量保 ...

  8. js之循环语句

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

  9. New Barns

    New Barns 时间限制: 1 Sec  内存限制: 128 MB 题目描述 Farmer John notices that his cows tend to get into argument ...

  10. print pdf bug & DOCTYPE

    print pdf bug & DOCTYPE OK with <!DOCTYPE html> <!DOCTYPE html> <html lang=" ...