在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 字体图标的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
Javascript String.replace的妙用
Sep 08 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
易被忽视的js事件问题总结
May 14 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
移动端底部导航固定配合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模板类代码
2008/09/07 PHP
php str_pad 函数使用详解
2009/01/13 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
js调用设备摄像头的方法
2018/07/19 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
python实现线程池的方法
2015/06/30 Python
Python 列表理解及使用方法
2017/10/27 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
详解Python中的Lock和Rlock
2021/01/26 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
秋天的怀念教学反思
2014/04/28 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
一文弄懂MySQL索引创建原则
2022/02/28 MySQL
nginx静态资源的服务器配置方法
2022/07/07 Servers