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. adb 命令收藏学习地址

    adb 命令相关的网页https://www.cnblogs.com/medsonk/p/8334847.htmlhttps://www.cnblogs.com/medsonk/p/6959658.h ...

  2. 折线分割平面(hdoj 2050,动态规划递推)

    Problem Description 我们看到过很多直线分割平面的题目,今天的这个题目稍微有些变化,我们要求的是n条折线分割平面的最大数目.比如,一条折线可以将平面分成两部分,两条折线最多可以将平面 ...

  3. 服务器做ssh免秘钥登陆

    集群内服务器做非root用户免秘钥登陆:1.node1新建用户abc1,制作公钥.私钥(一路回车键即可)ssh-keygen –t rsa将自动在/home/abc1/.ssh/目录下创建公私钥文件如 ...

  4. ConcurrentHashMap笔记

    概览: 内部存储的数据结构为:数组+链表+红黑树,图示: 重要的属性(内部类): //存放元素的数组 transient volatile Node<K,V>[] table; //数组中 ...

  5. Linux 安装 JDK 详解

    安装 JDK 说明:Linux 系统中安装软件需在 root 用户下进行. (1) 首先下载 jdk-8u131-linux-x64.rpm (2)将用户切换至 root,在 opt 文件夹下新建 s ...

  6. Placing Lampposts

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=91212#problem/E #include <iostream> #inc ...

  7. [bzoj1833][ZJOI2010][count] (数位dp)

    Description 给定两个正整数a和b,求在[a,b]中的所有整数中,每个数码(digit)各出现了多少次. Input 输入文件中仅包含一行两个整数a.b,含义如上所述. Output 输出文 ...

  8. pat甲级 1107. Social Clusters (30)

    When register on a social network, you are always asked to specify your hobbies in order to find som ...

  9. Spring Tool Suite（STS）启动时出现错误：Java was started but returned exit code=13问题解决

    Spring Tool Suite(STS)是开发Spring的套件,也就是一个Eclipse,在之上增加了对Spring框架的支持,使其能快速的开发Spring. 错误如下: 解决办法: 如果系统安 ...

  10. ngTbale真分页实现排序、搜索等功能

    一. 真分页表格基础 1. 需求:分页,排序,搜索都是需要发API到服务端. 2. JS实现代码: getStorage是localStorage一个工具方法,可以自己写这个方法. API参数如下: ...