如何在vue项目中系统的使用iconfont字体图标

如何在vue项目中系统的使用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

生成在线链接后，直接在项目中引入就可以了，当然我更喜欢前面一种方式