专栏首页vue的实战vue中使用iconfont

vue中使用iconfont

第一步: 进入官网,注册--登录

阿里巴巴矢量库

第二步: 图标管理---我的项目--创建项目---新建

新建项目

第三步: 进入图标库--官方图标库

开始选择图标

第四步:选中图标-- 添加入库-- 添加至项目---选择刚刚创建的项目--确定

下面举例我们选择了两个图标

购物车中的图标

添加至项目

第五步: 下载至本地---- 点击下载至本地按钮

下载至本地

第六步: 解压下载的压缩文件----整理放入vue中的static中(在static中新建文件夹 icon ),同时直接把iconfont.css放入static中

放入static的icon里面

注意要修改地址

5个URL要修改加./icon/

第七步: vue的main.js中引入 *注意必须: npm install css-loader -s 否则报错

import "../static/iconfont.css"

第八步: 使用iconfont

<span class="icon iconfont">&#xe6a1;</span>

不同的图标 只是span的内容不一样,class名称一样。

图标

vue报错原因:

  • 没有npm install css-loader -s
  • 没有修改iconfont的URL的引用地址
  • 没有在main.js中引入iconfont.css

各位,今天的分享到这里,谢谢大家的阅读。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【Rust日报】 2019-08-09:我學習rust的前三個月

    到目前為止,感謝社區的回饋與rust團隊對rust語言的維護,也感謝tokio有專業的團隊在維護。

    MikeLoveRust
  • Java是如何实现平台无关性(跨平台)的?

    相信对于很多Java开发来说,在刚刚接触Java语言的时候,就听说过Java是一门跨平台的语言,Java是平台无关性的,这也是Java语言可以迅速崛起并风光无限...

    奋斗蒙
  • OC代码规范1——多用类型常量,少用#define预处理指令

    两年前针对这一点写过一篇文章Effective Objective-C 2.0——多用类型常量,少用#define预处理指令,本文是在这篇文章的基础上进行扩展的...

    拉维
  • LAMMPS的C++源代码的内部结构

    LAMMPS作为分子动力学模拟软件,最大的优点在于其开源的C++代码。C++作为典型的面向对象的程序语言,拥有很好的封装性和继承性,便于全世界的研究者按照自己的...

    DanielZhang
  • SpringBoot入门建站全系列(九)文件上传功能与下载方式

    Spring对文件上传做了简单的封装,就是用MultipartFile这个对象去接收文件,当然有很多种写法,下面会一一介绍。

    品茗IT
  • 【Rust日报】 2019-08-11:C++工程师的Rust迁移之道 组合与集成

    对于上述提到的3个问题,在Rust中有一个统一的解决方案,那就是trait系统, 更多内容请看正文。

    MikeLoveRust
  • CSS基础知识

    CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。使...

    公众号php_pachong
  • 学习路线

    我们可以通过今年最新的TIOBE编程语言排行榜看到,JAVA在“昨天”、和“今天”都强势霸据榜单第一名,哇哦,看起来好像很厉害,那么为我们又为什么要学习Java...

    BWH_Steven
  • HTML+CSS,PC端/手机端公用部分样式代码整理(自己收藏)

    我们一般都会提一个 .overflow {overflow:hidden} 方便布局,也可以有效的阻止移动端上下左右拖动问题(溢出问题)

    用户5997198
  • 前端开发规范

    省略外链资源(图片及其它媒体资源)URL 中的 http / https 协议,使 URL 成为相对地址

    公众号php_pachong

扫码关注云+社区

领取腾讯云代金券