如何在vue项目中系统的使用iconfont字体图标
如何在vue项目中系统的使用iconfont字体图标
- 前言
- iconfont的特色
- 官网注册
- 在项目中使用的方式
前言
今天聊一下前端iconfont的使用方式,前端的图标经过这些年的发展,变得更系统化了,从最开始,我们使用的img图标,需要一个一个导入,再后来发明雪碧图,所以图标放在一张图上,利用定位进行使用,但是在添加新图标的时候,也会让之前图标的定位改变。维护起来也十分不方便,再到后来兴起fontawesome,用cdn进行引入,直到现在最终投入阿里iconfont的怀抱中。使用它可以方便快捷的管理整个项目的图标
iconfont的特色
iconfont和fontawesome不同的点在于,fontawesome不需要注册,直接在项目中引用cdn地址或者把文件下载后直接放到项目文件中使用,这样的优点是有点类似即插即用,不方便管理图标,而且图标数量慢慢也不如iconfont了,iconfont可以在官网去管理你每个项目的图标,实现更精准化的管理和优化,下面开始详细的说一下iconfont的使用步骤
官网注册
首先我们要官网去注册一个账号,然后在个人中心来创建你的项目
首先在项目管理中新建一个项目名,我新建了一个test project。
然后进入图标库里,图标库里是有分类的,你可以看一下哪类图标适合你的项目,我直接选的的阿里巴巴国际站的官方图标库,点击进去就可以选图标了
看中你想要的图标,你可以点击小车,添加到你的购物车里(我勉强理解为这是购物车吧)
然后我选取了16个图标,然后添加进我刚刚建的项目中,下面还有两个选项,一个是下载素材,这个是直接下载图标,类似这样
可以选择你要的文件格式,可选svg 、ai 、png这三种格式了,不推荐这种方式,不然这跟很多年前引入图片有什么区别
第三个按钮,下载代码和添加到项目中有点类似,但是也不推荐,因为不方便管理。
然后你可以在你的项目中就添加了这些图标,你可以进行删除,或者再添加,还可以上传你本地的图标,这个就不展开说了
在项目中使用的方式
可以下载至本地,可以看到是个压缩包,之后把文件放到你的项目中,一般都是放在src文件下的style全局样式文件夹中
大概的文件结构就是这样,然后你需要在index.scss文件中引入fonts中的文件
@import './fonts/iconfont.css';
这个引入至关重要,一定不要忘了,不然使用class方法引入图标是不起作用的
@font-face {font-family: 'auth-icon';src: url('./fonts/iconfont.eot'); /* IE9*/src: url('./fonts/iconfont.eot') format('embedded-opentype'), /* IE6-IE8 */url('./fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('./fonts/iconfont.woff') format('woff'),url('./fonts/iconfont.svg') format('svg'); /* iOS 4.1- */font-weight: normal;font-style: normal;
}
这些引用是适用于其他格式的
.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;position: relative;top:1px;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
这里设置iconfont这个类名的样式,可以修改你使用class这种方式时,图标的大小或者其他样式
具体使用方式可以看这个demo的html文件
里面有在项目里使用图标的例子,我就不详细的去阐述了
还有另一种方式去使用iconfont
生成在线链接后,直接在项目中引入就可以了,当然我更喜欢前面一种方式
如何在vue项目中系统的使用iconfont字体图标相关推荐
- vue项目中如何使用阿里的字体图标iconfont
1.在阿里字体图标库中选择自己需要的图标 网址:iconfont-阿里巴巴矢量图标库 1.1 点击购物车,加入选择的图标 1.2 再点击上方购物车,如果是多人写作项目直接添加到项目即可 ...
- 如何在vue项目中使用Highmaps(vue+Highmaps)
如何在vue项目中使用Highmaps 功能需求 思路 分析 实现 第一步:引入 第二步:介绍一下这个world是个啥. 第三步:调用 注意点(十分重要) 写在最后 功能需求 近日我接到了这么一个需求 ...
- 如何在vue项目中修改less变量,多主题项目解决方案
如何在vue项目中修改less变量,多主题项目解决方案 参考文章: (1)如何在vue项目中修改less变量,多主题项目解决方案 (2)https://www.cnblogs.com/niubilit ...
- 如何在vue项目中设置首页
如何在vue项目中设置首页 1.首先创建一个vue为后缀名的文件,最好在新建的文件夹下面创建,如下图所示: 说明:一般我们的主要页面代码都是写在vue 项目中的这个src文件夹下,项目中所会引用到的组 ...
- 如何在vue项目中使用lodop打印插件
如何在vue项目中使用lodop打印插件 - 简书 先写了个webdemo <%--Created by IntelliJ IDEA.User: AdministratorDate: 2018/ ...
- vux 显示 html,如何在vue项目中使用vux
编者:只需6步,教你如何在vue项目中使用vux, 1.在项目里安装vuxnpm install vux --save2.安装vux-loader (这个vux文档中没有明文跟你说要安装的啦) np ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 【vue】如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 转:如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
最新文章
- 简单例子解释invalidate(), requestLayout() (常用还是需要知道的)
- [20150113]关于oracle的存储结构.txt
- 网站SEO优化如何保证收录量?
- 2018牛客网暑期ACM多校训练营第二场 D - money(贪心)
- PTA浙大版python程序设计题目集--第2章-3 阶梯电价 (15 分)
- java 解析并生成 XML
- java快捷键 --_Java中的快捷方式“或分配”(| =)运算符
- 深度学习(五十二)变分贝叶斯自编码器(下)
- 力扣232-用栈实现队列(C++,附思路)
- 类模板使用示例(二)类模板整体特化
- 华中师范大学计算机考研论坛,2020年华中师范大学计算机考研经验分享
- 增加Java项目经验
- 考研一年到底需要花多少钱?这个你必须要知道!!!
- 在markdown下用mma画函数图像
- Hadoop3.2.1 【 YARN 】源码分析 : ContainerManager浅析
- ios添加邮件收件服务器,iOS 系统邮件的基础使用
- 满血复活~喵呜~喵~呜~
- python函数五要素_python之基础篇(二)
- (六)温故知新系列之RXJS——RXJS操作符基础(转化类)
- java MySQL 查询所有子级(不包含自己)
热门文章
- word中序号自动填充方法介绍
- html自定义序号样式,word设置自定义样式
- 艾瑞数据显示搜狐视频稳居第二 美剧营销占先机
- 一份完整齐全的技术方案文档
- 【手写数字识别】Fisher分类手写数字识别 【含Matlab源码 505期】
- 【阅读笔记】时间序列之TPA-LSTM(含Pytorch代码实现)
- 对未来计算机畅想英语作文80词,科技改变未来的生活英语作文 科技改变未来生活的英语作文80字...
- linux vim set ff,Linux命令:vi | vim命令
- VLC+Qt播放器对比测试
- Vue简明实用教程(01)——Vue框架入门