在Vue中使用icon 字体图标
1、使用线上的阿里iconfont图标库
1.打开
iconFont
官网 选择自己喜欢的图标,并且添加购物车
2.点击购物车,添加至项目3 生成链接
4在我们的vue
项目中,找到index.html
文件,引入css
样式,记住这里要放上你的链接地址
如:<link rel="stylesheet" href="http://at.alicdn.com/t/font_657604_xujhsb9zlug3z0k9.css">
5接下来我们就可以在任何组件地方使用我们的图标了,我这里就是用上面生成的三个图标其中的一个。
如:<i class="icon iconfont icon-wode"></i>
2、但是考虑网络及用户体验 阿里iconfont下载本地使用
1 阿里
iconfont
图标直接下载到本地
2 用来存放字体图标的本地文件在src/assets
文件下创建iconfont
文件夹
把这些文件放入文件夹
3.如过项目中没有下载css-loader
依赖包,就进行下载,否则会报错npm install css-loader -D
4 当然也可以放在不同的文件夹下,但是需要注意的是必须修改iconfont.css
中@font-face
中src
引入的字体路径为本地路径,现在默认的是绝对路径iconfont.css
文件中改路径
5 在main.js
中引入iconfont.css
文件,如:import 'xxx/xxx/xxx/iconfont.css'
6直接使用<template> <divstyle="background-color:cadetblue;color:#333;padding:30px"><p><i class="iconfont"></i> Unicode </p><p><i class="iconfont icon-fanhuidingbu"></i> Font class </p><pstyle="font-size:2em;"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-fanhuidingbu"></use></svg> Symbol </p> </div> </template><script>// Font class import "../assets/iconfont/iconfont.css";、 // Symbol import "../assets/iconfont/iconfont.js"; export default { data() {return {}; } };</script><style scoped>* { font-size: 24px; } /* 下面的样式可以单独写,然后引入 */ @font-face { /* Unicode */ font-family: "iconfont"; src: url("../assets/iconfont/iconfont.eot"); src: url("../assets/iconfont/iconfont.eot?#iefix") format("embedded-opentype"),url("../assets/iconfont/iconfont.woff2") format("woff2"),url("../assets/iconfont/iconfont.woff") format("woff"),url("../assets/iconfont/iconfont.ttf") format("truetype"),url("../assets/iconfont/iconfont.svg#iconfont") format("svg"); } .iconfont { font-family: "iconfont" !important; font-size: 1em; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon { width: 2em; height: 2em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }</style>
3、使用vue-awesome
1.首先安装
vue-awesome
依赖包npm install vue-awesome
2.在
main.js
文件下 在github
上可以明确看到如果考虑项目大小,只导入用于减少包大小的图标
import ‘vue-awesome/icons/flag’
或者不考虑大小
直接使用<icon name=”beer”></icon>
4、使用IconMoon
挺好用
iconMoon
可以生成自己的矢量图,这点是我喜欢的
1.如果想要直接使用它们自带的官方图标
选择我们想要的图标之后,点击右下角的Generate Font F
这时会看到我们已经选择的图标,在这里可以修改名称等,然后点击右下角的下载
2接下来在vue
项目中创建文件夹,打开style.css
样式,修改引入字体的路径(不同路径写的方式不一样,需要注意)
3在main.js
中全局引入
import ‘@/assets/css/icomoon/style.css
’
如果想要使用我们自己画的.svg
格式的矢量图图标,点击Import Icons
导入我们本地的.svg
格式的图标(注意,矢量图是用矢量线画的,png,jpg
等使用像素来的,不可以直接用png
转成svg
格式,否则不成功)
引入之后,接来下就和上面的步骤一样了。
4直接使用
参考:https://www.jqhtml.com/45617.html
在Vue中使用icon 字体图标相关推荐
- 在vue中如何使用字体图标(阿里巴巴)
在vue中如何使用字体图标(阿里巴巴) 1.选择需要的图标加入购物车. 2.打开购物车,添加至项目. 3.点击生成在线代码 4.点击下载至本地,放入需要文件夹下,可以放入assets下. 5.在sty ...
- vue中引入第三方字体图标库iconfont,及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
- 梳理详细 vue中引入第三方字体图标库iconfont
最近在项目中需要使用第三方图标库,我选择了阿里的iconfont.记录下学习过程.在网上查阅资料的时候,发现很多教程写的比较模糊,一些博主只是提供一种可实现的方式,但是并没有完全区分iconfont的 ...
- html页面icon字体无法显示,bootstrap中icon字体图标怎么不显示?
bootstrap中icon字体图标怎么不显示?下面本篇文章给大家介绍一下Bootstrap字体图标不显示问题.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: bootstr ...
- 在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式 首先说明一下,这 ...
- Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)
Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库) Font Awesome 是一个十分优秀的第三方图标库,我之前也写过文章介绍如何在 html 页面中使 ...
- uni-app中使用扩展字体图标遇到的坑
uni支持使用字体图标,跟web使用方法一样.需iconfont.css文件中的引用方式 在项目中存放位置 在app.vue文件中全局引用字体图标 //在app.vue中引用方式 @import '. ...
- 在网页中画Icon小图标
在网页中画Icon小图标. 现代网页中,绝大部分都采用了Icon小图标的方式.其积分大致分为三类,CSS Sprite,font+HTML,font+CSS. CSS Sprite:又称为CSS雪碧, ...
- 安卓开发使用ttf文字_Android中正确使用字体图标(iconfont)的方法
字体图标 字体图标是指将图标做成字体文件(.ttf),从而代替传统的png等图标资源. 使用字体图标的优点和缺点分别为: 优点: 1. 可以高度自定义图标的样式(包括大小和颜色),对于个人开发者尤其适 ...
最新文章
- java 清空一个list数据库_java – JPA EntityManager删除数据库中的所有记录
- Tensorflow— 下载google图像识别网络inception-v3并查看结构
- Requirejs2.0笔记
- win7部分便笺的元数据已被损坏
- 控制台编写JAVA程序教程_写一个java程序的步骤是什么?写java程序技巧
- js 序列化内置对象_内置序列化技术
- mysql 低端_mysql入门
- 留学面试 计算机专业话题,英语面试_美国留学计算机专业详解_沪江英语
- 为什么C语言输出结果总是1,c语言编程问题这个题我哪里错了输出结果总是0
- 看不懂旷视升级,是因为不知道中国AI正在经历的变革
- Grafana 仪表盘和图形编辑器
- 人脸方向学习(十):Face Detection-MobileNet_SSD解读
- android zip4j之--解压zip文件并实时显示解压进度
- 【转载】MATLAB入门书籍推荐
- visio中的公式在转换pdf后公式糊掉;word导出pdf时visio丢失模块字体
- week7 TT的魔猫
- 简单题我重拳出击,困难题我唯唯诺诺
- 如何查找视频文件 android,如何扫描出android手机中所有的视频文件
- Python-根据照片信息获取用户详细信息(微信发原图或泄露位置信息)
- 一个简单的物流管理系统