在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 相关文章推荐
ExtJS DOM元素操作经验分享
Aug 28 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 Javascript
Nuxt的路由动画效果案例
Nov 06 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根据年月获取季度的方法
2014/03/31 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
php简单smarty入门程序实例
2015/06/11 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
前端性能优化建议
2020/09/17 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
wxPython窗口的继承机制实例分析
2014/09/28 Python
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
Python探索之修改Python搜索路径
2017/10/25 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
基于python监控程序是否关闭
2020/01/14 Python
Python标准库itertools的使用方法
2020/01/17 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
政府采购方案
2014/06/12 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
护士求职自荐信
2015/03/25 职场文书
公开致歉信
2019/06/24 职场文书
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript