编程 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 相关文章推荐

最短的javascript:地址栏载入脚本代码

Oct 13 Javascript

对javascript的一点点认识总结《javascript高级程序设计》读书笔记

Nov 30 Javascript

一个JavaScript操作元素定位元素的实例

Oct 29 Javascript

JS烟花背景效果实现方法

Mar 03 Javascript

jQuery中hover与mouseover和mouseout的区别分析

Dec 24 Javascript

javascript实现列表切换效果

May 02 Javascript

jQuery判断checkbox选中状态

May 12 Javascript

AngularJS 过滤器（自带和自建）详解

Sep 19 Javascript

详解用原生JavaScript实现jQuery的某些简单功能

Dec 19 Javascript

JavaScript的for循环中嵌套一个点击事件的问题解决

Mar 03 Javascript

浅谈angular.js跨域post解决方案

Aug 30 Javascript

js计算两个时间差天时分秒毫秒的代码

May 21 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利用COM对象访问SQLServer、Access

2006/10/09 PHP

php 图片加水印与上传图片加水印php类

2010/05/12 PHP

PHP 获取远程文件大小的3种解决方法

2013/07/11 PHP

php猴子选大王问题解决方法

2015/05/12 PHP

php微信开发之图片回复功能

2018/06/14 PHP

yii框架结合charjs统计上一年与当前年数据的方法示例

2020/04/04 PHP

javascript 静态对象和构造函数的使用和公私问题

2010/03/02 Javascript

js字符串转换成xml对象并使用技巧解读

2013/04/18 Javascript

从数据库读取数据后将其输出成html标签的三种方法

2014/10/13 Javascript

详解js中构造流程图的核心技术JsPlumb

2015/12/08 Javascript

JavaScript编写带旋转+线条干扰的验证码脚本实例

2016/05/30 Javascript

jQuery easyui刷新当前tabs的方法

2016/09/23 Javascript

javascript实现简单的可随机变色网页计算器示例

2016/12/30 Javascript

详解在 Angular 项目中添加 clean-blog 模板

2017/07/04 Javascript

Vue中"This dependency was not found"问题的解决方法

2018/06/19 Javascript

微信小程序日历效果

2018/12/29 Javascript

vue中使用v-model完成组件间的通信

2019/08/22 Javascript

NodeJS 文件夹拷贝以及删除功能

2019/09/03 NodeJs

为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

2019/10/14 Javascript

研究Python的ORM框架中的SQLAlchemy库的映射关系

2015/04/25 Python

Python安装官方whl包和tar.gz包的方法(推荐)

2017/06/04 Python

python购物车程序简单代码

2018/04/18 Python

对Python中创建进程的两种方式以及进程池详解

2019/01/14 Python

python ipset管理增删白名单的方法

2019/01/14 Python

python学生管理系统开发

2019/01/30 Python

tensorboard实现同时显示训练曲线和测试曲线

2020/01/21 Python

在keras 中获取张量 tensor 的维度大小实例

2020/06/10 Python

夏威夷航空官网：Hawaiian Airlines

2016/09/11 全球购物

英国家庭、花园、汽车和移动解决方案：Easylife Group

2018/05/23 全球购物

巴西化妆品商店：Lojas Rede

2019/07/26 全球购物

党员创先争优承诺书

2014/03/26 职场文书

相亲活动方案

2014/08/26 职场文书

暑期培训班招生方案

2014/08/26 职场文书

教师求职自荐信

2015/03/26 职场文书

护士年终工作总结不会写？各科护士模板总结

2020/01/02 职场文书

浅谈Redis缓冲区机制

2022/06/05 Redis

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

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

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

3使用vue-awesome

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