使用Vue技术栈开发不仅效率高，而且很友好，而且还有很多基于vue的UI框架，例如：element等，但是这类框架美中不足的是，图标太少。为了解决这个问题，不得不引入第三方字体库，今天以阿里图标库为例，如何在vue中使用。

1、首先找到合适图标，然后点击添加入库，接着点击右上角的购物车图标。

2、你刚才选择的图标就能在侧边栏看到了，选择要加入的项目（提前建好的项目），点击确定。

3、进入我的项目页面，就能看到所有选择好的图标，点击下载至本地按钮。

4、文件解压后，将所有文件复制到如下目录。

5、在main.js文件里引入iconfont.css。

6、现在就可以在项目中引入图标了。必须添加iconfont类，然后再添加图标名字作为类名。

<i class="iconfont icontuding"></i>

在vue项目中引入阿里图标库小记的更多相关文章

  1. 前端学习笔记系列一：5 在项目中引入阿里图标icon

    进入到阿里的图标库网站,里面有上百万种icon,https://www.iconfont.cn,需要注册一个帐号,然后进入到这个页面,在这里点击右下角的带加号的图标,创建一个新的项目,名称与你要使用图 ...

  2. 小程序中使用阿里图标库iconfont

    小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...

  3. MintUI引入vue项目以及引入iconfont图标

    官网地址:http://mint-ui.github.io/#!/zh-cn 中文文档:http://mint-ui.github.io/docs/#/zh-cn2 示例展示:http://eleme ...

  4. 前端学习笔记系列一：10整体移动vscode代码块、VSCode 使用 stylus，配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  5. 在vue项目中引入jquery

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

  6. vue项目中引入Sass

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

  7. VUE 引入阿里图标库

    本身项目是VUE, Element-UI项目, 所以内置Element-UI图标库 地址如下, https://element.eleme.cn/#/zh-CN/component/icon 使用时: ...

  8. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  9. vue项目中使用iconMoon图标

    前两篇文章写了一下如何在vue项目中使用vue-awesome和阿里的iconfont,这里介绍一下如何使用iconMoon图标 iconMoon和前两者相比可以生成自己的矢量图,这点是我喜欢的.至于 ...

随机推荐

  1. Vue技术点整理-前言

    前言 Vue版本说明:本文档编写时,Vue稳定版本为 2.6.10 本文档编写目的为:整理Vue相关生态的技术点.和开发中经常使用到的技术点,让开发者快速上手开发,提升开发效率 一,Vue开发工具:本 ...

  2. easyui 使用jquery动态添加组件样式问题

    可以使用$.parser.parse();这个方法进行处理: 例如:   $.parser.parse(); 表示对整个页面重新渲染,渲染完就可以看到easyui原来的样式了:   var targe ...

  3. zeroMQ 4 java

    自己最开始是在cloud foundry中接触过消息服务器(nats),或者说是消息中间件,也算是初步知道了一个消息服务器对于分布式的网络系统的重要性,后来自己也曾想过在一些项目中使用它,尤其是在一些 ...

  4. Contiki源码分析--CPU为cc253x里的uart0.c

    我所使用的Contiki系统是contiki-sensinode.理解该文需要有cc2530里uart的相关知识,具体寄存器的用法不做介绍. 先放上所有代码,然后再仔细分析. #include < ...

  5. jekyll搭建个人博客2

    目录 个性化 jekyll目录结构 修改个人信息 修改头像 修改背景颜色 关于头像的效果 图片问题 域名 个性化 jekyll目录结构 个性化就是要对文件内容作出修改,使得博客外观发生变化,在修改文件 ...

  6. shell_链接命令ln与nohup命令使用方法

    ln命令是一个链接命令,工作中用的比较多的就是对一个文件或者是目录建立起软连接.软连接的概念类似于windows下的快捷方式.比如,在win下,我们经常在安装完word.ppt等office程序后,在 ...

  7. Linux系统-CENTOS7界面美化

    前期准备: 在美化前,我们先安装一个扩展源. yum install -y epel-release 然后安装字体包 yum -y install liberation-mono-fonts 安装gn ...

  8. 性能测试-实例讲解VU、RPS、RT公式换算

    概述 今天看到一篇文章讲解VU.RPS.RT,中间有一个公式如下图 并发数 = RPS * 响应时间  于是我在本地做了几次实验,试图验证一下公式的准确性 实验网站 www.baidu.com 第一次 ...

  9. 实现一个代码自动生成（一）：模板引擎Freemarker

    目录 前言 模板引擎FreeMarker 前言 在现在的开发当中,代码生成已经是必不可少的一个功能,每个公司都会有自己的一套定制的项目骨架,而实现代码自动生成,模板引擎是必不可少的,所以在这篇博客中, ...

  10. 简单题[期望DP]

    也许更好的阅读体验 \(\mathcal{Description}\) 桌面上有R张红牌和B张黑牌,随机打乱顺序后放在桌面上,开始一张一张地翻牌,翻到红牌得到1美元,黑牌则付出1美元.可以随时停止翻牌 ...