【图标库】iconfont的使用

作者: 李李李李李晓华 | 来源:发表于2019-03-11 22:30 被阅读0次

以下全是个人观点，不喜勿喷

1. 之前遇到图标的处理方式

以京东商城做例子：
在京东商城首屏的右下角有这样的一个效果（看图标）

京东商城图标案例
我们遇到这样的样式会去寻找多个小图标小图片（或者css sprites），然后当作背景图的方式引入到相对应的i标签中。

假如遇到了以下情况：

鼠标悬浮后，图片变色

当一个动作触发后，需要改变图片的颜色，那么我们只能再换张图片替代原来的位置。

如果这样的情况发生，我们有没有其他的处理方式？

2. 有没有更好的方式

Icon（图标）在开发中经常见到，如分享、回复、赞、返回、话题、访问、箭头等等。

如果使用背景图的方式引入，在移动端自适应的布局上，页面可能会自适应的放大，那么图标放大后就会显示的模糊不清晰。

如果触发改变图标样式，就可能需要重新定义背景图路径和位置。

当然，不小心之间你也会碰到其他很烦心的问题。

所以，为了防止你突然需要的时候，我们现在寻求一种更好的方式。

3. 图标字体

WHAT? 什么是图标字体？
不解释了，直接看图吧(再次借用我最爱的京东)

目前新版京东的图标
难道你要让我写这个？？？？
肯定不是呀，那这个是什么玩意儿呢？

字体图标可以做透明、旋转等图片可以做的事情

本质是文字，可以很随意改变颜色、产生阴影、透明效果；

本身体积小，携带的信息没有削减

几乎支持所有浏览器(当然包括你首先想到的IE)

移动设备必备

废话别多说，怎么用？

3. 图标字体的使用

要想获取图标字体，大多数两种途径（能自己画出来的大神请带我），第一找到付费网站购买，第二就是到免费网站下载，

免费下载网站很多，网上搜索图标字体库一大堆，多的你用不完

我经常使用的是阿里巴巴图标库（https://www.iconfont.cn/）,本次也就拿这个图标库当案例讲解。

首先你需要登录

登录入口

2种登录方式供你选择（阿里员工除外 ☹☹☹）

登录方式选择
首选当然建议github登录，因为毕竟是世界最大男性交友平台。

毕竟一个项目可能要用到很多的图标，我们何不整理一下呢？

找到我的项目我的项目
然后新建项目
新建项目
新建项目的定义

然后在搜索框输入你想要的图标名称，比如我来 biu～一下

搜索biu

找到你所需要的图标

image.png

然后点击购物车

加入购物车

然后继续寻找你要的图标，当图标都加入购物车完成之后，我们当然就要进入购物车啦

点击右上角购物车

确认一下你的购物车是不是你要剁手的内容，然后点击购买，不对，是点击添加至项目。

image.png

这样你就看到你添加的图标了，点击font class选项（当然最常用的，也是兼容性好的）

选择图标类型

颜色不满意？大小不满义？没关系，你鼠标放在图标上，点击小笔笔～修改成你的feel吧

选择修改
爱怎么改怎么改

接下来呢,你有两种选择，一种是把生成的css下载到本地，一种是在线链接，我们说一下在线链接。

点击查看在线链接按钮（如果出现暂无代码的提示，请多点几下按钮）

在线链接按钮
在线链接按钮

到这里开始你的表演吧！打开编辑器，在link标签中写入刚才的地址
然后在你需要的位置写一个标签（案例使用i标签）
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <link rel="stylesheet" href="http://at.alicdn.com/t/font_1082072_a30v2luczbf.css">
</head>
<body>
   <i class="iconfont iconBiu"></i>
</body>
</html>
咿呀，这时候你发现，我的i标签中多两个类名，这个是什么?
你还记得刚创建项目的时候那么界面吗? 记不得就往上翻一下吧。

第一个类名的来历
你刚才书写的这个iconfont就是使用在这里，代表你使用的是这个项目的图标样式，那是这个项目的哪一个图标呢，这个就是第二个类名的含义了。第二个类名从哪里来？你看图
第二个类名
或者直接复制代码
复制代码-类名
运行一下吧。。你会惊喜的发现，哎呀卧槽出来了
运行结果
更神奇的是，它还能设置字号，颜色！！！因为它就是一个文字。
修改样式

biu～biu～biu～内容就要告一段落了。
不对呀，你还有好多没讲呢，怎么下载使用呀，怎么使用其他的方式呢?来来来客官看过来。

教程位置