图标
图标指具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。在软件开发中，不管是web开发、桌面应用程序开发以及APP开发中，都离不开图标。
本文给大家介绍两种市面上比较好的图标解决方案：Font Awesome字体图标库以及阿里巴巴矢量图标库。
虽然网上还有其它可以下载图标的地方，但是不推荐大家使用，原因有三：
【1】不是矢量图片，放大后会失真。
【2】需要收费。
【3】不成体系，东拼西凑的图标会大大降低可视化效果。
Font Awesome字体图标库
01 介绍
Font Awesome是一套可缩放的矢量图标库，可以使用CSS属性更改图标大小、颜色、阴影或者其它任何支持的效果。目前常用的Font Awesome版本是4.7版本，新版本已更新到Font Awesome 5.x版本。
02 使用步骤
特别注意：Font Awesome从3.X、4.X到5.X版本，每次升级，包括图标数量、CDN地址以及图标的使用方式都会发生特别大的变化，所以使用前特别注意您使用的是哪个版本，此处我演示时使用的是最新版本5.11，如需使用4.x版本，则官网地址为：http://fontawesome.dashgame.com/#basic
步骤一：引入css资源
方式1：cdn引入
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Awesome</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/
v5.11.2/css/all.css">
</head>
<body>
<span style="font-size: 3em; color: Tomato;">
<i class="fas fa-camera"></i>
</span>
</body>
</html>
方式2：css下载到本地，<link>标签引入
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Awesome</title>
<link rel="stylesheet" href="fontawesome-free-5.11.2-web/css/all.css">
</head>
<body>
<span style="font-size: 3em; color: Tomato;">
<i class="fas fa-camera"></i>
</span>
</body>
</html>
步骤二：在官网中查看图标样式，并引入到<i>标签中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Awesome</title>
<link rel="stylesheet" href="fontawesome-free-5.11.2-web/css/all.css">
</head>
<body>
<!-- 给<i>标签添加图标的类即可使用图标 -->
<span style="font-size: 3em; color: Tomato;">
<i class="fas fa-camera"></i>
</span>
<!-- 在图表父标签上添加css,Font Awesome图标会自动继承父标签的样式 -->
<span style="font-size: 3em; color: Tomato;">
<i class="fas fa-spinner fa-spin"></i>
</span>
<span style="font-size: 3em; color: Tomato;">
<i class="fas fa-cog fa-spin"></i>
</span>
<span style="font-size: 3em; color: Tomato;">
<i class="fas fa-spinner fa-pulse"></i>
</span>
</body>
</html>
如打开 Font Awesome 5 官网，即可看到所有图标，如下图
Font Awesome 5
以上图中第一排左二的'笔记本'图标为例，
<!-- Font Awesome 4 用fa开头，Font Awesome 5为fas开头 -->
<!-- 【fa】 +【-】+ 【图标的类名】，如fa-ad、fa-adjust -->
<i class="fas fa-address-book"></i>
阿里巴巴矢量图标库
阿里巴巴矢量图标库中，是阿里巴巴官方使用的图标库，与Font Awesome相同的是，该网站中的图标都是矢量图标，放大后不会失真；不同的是，这些图标是svg格式的图片，不能使用CSS改变颜色，需要在下载时候手动选择颜色。
阿里巴巴矢量图标库
使用方式：下载图片，在HTML中引入即可
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿里巴巴矢量图标库</title>
</head>
<body>
<div style="margin:0 auto;margin-top:150px;width:600px;height:800px">
<img src="personal_tax.svg" alt="" style="width:50px;heigth:50px">
<img src="personal_tax.svg" alt="" style="width:65px;heigth:65px">
<img src="personal_tax.svg" alt="" style="width:75px;heigth:75px">
<img src="personal_tax.svg" alt="" style="width:85px;heigth:85px">
<img src="personal_tax.svg" alt="" style="width:95px;heigth:95px">
</div>
</body>
</html>
根据我自己的使用情况来看，Font Awesome字体图标库以及阿里巴巴矢量图标库都有非常好的使用效果，阿里巴巴矢量图标库的使用方法比较简单，下载图片后用<image src="">标签引入即可；下一篇文章，我将详细解读Font Awesome 4 以及Font Awesome 5,敬请期待......
网友评论