编程 Javascript

在Vue中使用icon 字体图标的方法

Posted in Javascript onJune 14, 2019

1.使用线上的阿里iconfont图标库

1.打开 iconFont官网选择自己喜欢的图标，并且添加购物车

2.点击购物车，添加至项目

3 生成链接

在Vue中使用icon 字体图标的方法

4在我们的vue项目中，找到index.html文件，引入css样式，记住这里要放上你的链接地址

5接下来我们就可以在任何组件地方使用我们的图标了,我这里就是用上面生成的三个图标其中的一个。

2但是考虑网络及用户体验阿里iconfont下载本地使用

1 阿里iconfont图标直接下载到本地

2 在assets文件下创建iconfont文件夹

把这些文件放入文件夹

在Vue中使用icon 字体图标的方法

3 iconfont.css文件中改路径

在Vue中使用icon 字体图标的方法

4 在main.js中引入iconfont.css文件

在Vue中使用icon 字体图标的方法

5直接使用

3使用vue-awesome

1.首先安装vue-awesome依赖包

npm install vue-awesome

2.在main.js文件下

在github上可以明确看到如果考虑项目大小，只导入用于减少包大小的图标

import 'vue-awesome/icons/flag'

或者不考虑大小

在Vue中使用icon 字体图标的方法

直接使用

<icon name="beer"></icon>

总结

以上所述是小编给大家介绍的在Vue中使用icon 字体图标的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

在Vue中使用icon 字体图标的方法

- Author -

yang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery maxlength文本字数限制插件

Apr 16 Javascript

jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend

Aug 03 Javascript

五段实用的js高级技巧

Dec 20 Javascript

jQuery的Ajax的自动完成功能控件简要说明

Feb 22 Javascript

jquery制作多功能轮播图插件

Apr 02 Javascript

JavaScript如何禁止Backspace键

Dec 02 Javascript

JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】

Aug 23 Javascript

从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例

Apr 13 Javascript

Angular搜索过滤批量删除添加表单验证功能集锦(实例代码)

Oct 25 Javascript

vue路由组件按需加载的几种方法小结

Jul 12 Javascript

js实现简易ATM功能

Oct 27 Javascript

vue项目配置sass及引入外部scss文件

Apr 14 Vue.js

移动端底部导航固定配合vue-router实现组件切换功能

Jun 13 #Javascript

后台使用freeMarker和前端使用vue的方法及遇到的问题

Jun 13 #Javascript

vue路由插件之vue-route

Jun 13 #Javascript

在JavaScript中使用严格模式(Strict Mode)

Jun 13 #Javascript

详解vuex之store源码简单解析

Jun 13 #Javascript

vue store之状态管理模式的详细介绍

Jun 13 #Javascript

微信小程序页面间跳转传参方式总结

Jun 13 #Javascript

You might like

php从数组中随机抽取一些元素的代码

2012/11/05 PHP

phpStudy配置多站点多域名方法及遇到的403错误解决方法

2017/10/19 PHP

php获得刚插入数据的id 的几种方法总结

2018/05/31 PHP

PHP正则判断一个变量是否为正整数的方法

2019/02/27 PHP

HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高

2021/03/09 Javascript

学习YUI.Ext 第三天

2007/03/10 Javascript

textContent在Firefox下与innerText等效的属性

2007/05/12 Javascript

document.body.scrollTop 值总为0的解决方法比较常见的标准问题

2009/11/30 Javascript

在JavaScript中获取请求的URL参数[正则]

2010/12/25 Javascript

functional继承模式摘自javascript:the good parts

2011/06/20 Javascript

原生js实现class的添加和删除简单代码

2016/07/12 Javascript

js判断是否为空和typeof的用法(详解)

2016/10/07 Javascript

AngularJs 利用百度地图API 定位当前位置获取地址信息

2017/01/18 Javascript

vue结合element-ui使用示例

2019/01/24 Javascript

vue全局自定义指令-元素拖拽的实现代码

2019/04/14 Javascript

微信小程序 Storage更新详解

2019/07/16 Javascript

Vue中实现回车键切换焦点的方法

2020/02/19 Javascript

JS eval代码快速解密实例解析

2020/04/23 Javascript

微信小程序实现首页弹出广告

2020/12/03 Javascript

[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场

2018/04/06 DOTA

python实现sublime3的less编译插件示例

2014/04/27 Python

Python的Django框架中消息通知的计数器实现教程

2016/06/13 Python

python发送多人邮件没有展示收件人问题的解决方法

2019/06/21 Python

python按行读取文件并找出其中指定字符串

2019/08/08 Python

python实现扫雷小游戏

2020/04/24 Python

如何在mac下配置python虚拟环境

2020/07/06 Python

美国现代家具网站：Design Within Reach

2018/07/19 全球购物

个人思想理论学习的自我鉴定

2013/11/30 职场文书

矿泉水广告词

2014/03/20 职场文书

纪念九一八事变演讲稿：牢记历史，捍卫主权

2014/09/14 职场文书

医院2014国庆节活动策划方案

2014/09/21 职场文书

2014年会计主管工作总结

2014/12/20 职场文书

关于颐和园的导游词

2015/01/30 职场文书

放飞理想主题班会

2015/08/14 职场文书

送给小学生的暑假礼物！小学生必背99首古诗

2019/07/02 职场文书

Javascript中的解构赋值语法详解

2021/04/02 Javascript

在Vue中使用icon 字体图标的方法

1.使用线上的阿里iconfont图标库

2但是考虑网络及用户体验 阿里iconfont下载本地使用

3使用vue-awesome

2但是考虑网络及用户体验阿里iconfont下载本地使用