仅供学习,转载请注明出处
简介
在制作前端页面的过程中,肯定有不少图标需要查找。本篇文章主要是介绍iconfont阿里巴巴矢量图标库 的使用。
那么讲到使用,首先就是要登录这个矢量图标库,请点击这里进行访问。
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-86c57f78de5af432cd13b349b62540f1.png)
登录
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-12660b5db9a319a52c2d776aee0e570c.png)
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-bf85a6325fd6f18fe57dbd915226e037.png)
在这里我选择使用Github登录。
图标管理,进入我的项目
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-6a7f0f3176c53d8cde3a9001a3b38382.png)
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-83a95cc5e7f2783738bfce6331349e77.png)
搜索图标,加入购物车
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-4253801a58a2fabfd29fa579f1936ec5.png)
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-fb25d8112a0d03594cd3f6ec36e91e0d.png)
选择一个下箭头图标,选择加入购物车。
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-be023e682d5919369036fc76f4f08bfd.png)
选择购物车的图标,加入项目
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-37ee0dbb7e2e59b9c55695a8956f699a.png)
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-53eb1631a0d4bea85bb36e832b96ebba.png)
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-9df4eac08057ea010dd796d5b2974ec0.png)
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-bb8e730cbc9424e4e51e2cd568223bee.png)
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-119490df3295f2b4dd6541fae1d4802a.png)
好了,上面演示已经新建了项目以及选择了图标。下面就要讲解怎么下载以及使用了。
下载图标
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-a0c6a9de5db32a52f3795098113cb66f.png)
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-888f752787f45dd2aec197683ce1288e.png)
下载之后,可以看到里面有很多文件。
查看demo_index示例说明
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-c42db09d1df9d718a495f0d96448aa82.png)
使用浏览器打开demo_index.html,可以看到有三种引用方式,如下:
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-0782b563677cc8af17472028b02643c5.png)
考虑写法比较方便的方式,我才用Font class方式,如下:
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-0e95e2d92d4c5d2a92d87d2a2a950924.png)
下面根据说明,新建一个测试项目引用一下看看。
新建的一个用来测试使用的项目
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-863e0cb25d7936c221dcd342f4802e57.png)
将图标下载的相关文件都放入css文件夹目录之中,如下:
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-86add147b3237bee41ac269a795d9d75.png)
编写HTML,引用图标
demo 说明引入步骤
第一步:引入项目下面生成的 fontclass 代码:
第二步:挑选相应图标并获取类名,应用于页面:
" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。
编写html
浏览器显示如下:
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-f3880c3c5bd1ca146748a3ad48dafe7e.png)
从上图就可以看出成功显示出来下箭头了。
但是从上面代码中的
icon-xiajiantou
是从哪里来的呢?
下面来演示一下。
从项目复制图标的代码
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-8a9b6c4afc41958def26e0893450185c.png)
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-55399ff8319cf41c23277948c95d4750.png)
那么如何调整图标的大小呢?
设置图标大小
调节字体图标的大小是通过元素的font-size属性来控制的;
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-2ddacd3488d97363f551845f51227338.png)
浏览器演示如下:
![阿里巴巴矢量图标库从注册到使用](https://www.ki66.com/wp-content/uploads/2020/06/frc-16b720ca1c8c2e2289aba843bb28ba51.png)
当然,使用Unicode的方式也很简单,这里就暂时不演示了。
评论