阿里矢量图iconfont的使用方法
一般那些小的图标都是用矢量图来表示的,然后就能像操作字体的方法一样操作这些小图标了,很是方便。比较常用的是阿里提供的一些矢量图标,基本上所有的图标都涵盖了。
链接地址:阿里矢量图标标库
方法1,在线引用
(一般是项目未完成时,用这种方法,好处是当想要增加新的图表时,只需要改变连接就行了,无需重新下载一遍)
(1)先登录
(2)随便选一个你喜欢的图标库,比如
(3)点击进去,找几个你项目需要用到的图标,添加到购物车,然后创建一个项目,将这些图标添加进去。
(4)在项目中引入这个样式
(5)用i标签使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_762222_eq395dz92z.css">
</head>
<body>
<div>
<i class="iconfont icon-feijichang"></i>
<i class="iconfont icon-chuzuche"></i>
<i class="iconfont icon-mima"></i>
<i class="iconfont icon-laidianxianshi"></i>
</div>
</body>
</html>
方法2,下载下来使用
(1)下载
(2)解压
(3)在项目工程建一个font的文件夹
(4)导入样式
(5)使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font/iconfont.css">
</head>
<body>
<div>
<i class="iconfont icon-feijichang"></i>
<i class="iconfont icon-chuzuche"></i>
<i class="iconfont icon-mima"></i>
<i class="iconfont icon-laidianxianshi"></i>
</div>
</body>
</html>