iconfont阿里巴巴矢量图标库从注册到使用
iconfont阿里巴巴矢量图标库从注册到使用
简介
在制做前端页面的过程当中,确定有很多图标须要查找。本篇文章主要是介绍iconfont阿里巴巴矢量图标库 的使用。html
那么讲到使用,首先就是要登陆这个矢量图标库,请点击这里进行访问。前端
登陆
在这里我选择使用Github登陆。浏览器
图标管理,进入个人项目
搜索图标,加入购物车
选择一个下箭头图标,选择加入购物车。bash
选择购物车的图标,加入项目
好了,上面演示已经新建了项目以及选择了图标。下面就要讲解怎么下载以及使用了。学习
下载图标
下载以后,能够看到里面有不少文件。测试
查看demo_index示例说明
使用浏览器打开demo_index.html,能够看到有三种引用方式,以下:字体
考虑写法比较方便的方式,我才用Font class方式,以下:spa
下面根听说明,新建一个测试项目引用一下看看。3d
新建的一个用来测试使用的项目
将图标下载的相关文件都放入css文件夹目录之中,以下:
编写HTML,引用图标
demo 说明引入步骤
第一步:引入项目下面生成的 fontclass 代码:
<link rel="stylesheet" href="./iconfont.css">复制代码
第二步:挑选相应图标并获取类名,应用于页面:
<span class="iconfont icon-xxx"></span>复制代码
" iconfont" 是你项目下的 font-family。能够经过编辑项目查看,默认是 "iconfont"。
编写html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./css/font_1056598_n3wpz4pry7/iconfont.css"></head><body> <span class="iconfont icon-xiajiantou"></span></body></html>复制代码
浏览器显示以下:
从上图就能够看出成功显示出来下箭头了。
可是从上面代码<span class="iconfont icon-xiajiantou"></span>
中的icon-xiajiantou
是从哪里来的呢?
下面来演示一下。
从项目复制图标的代码
那么如何调整图标的大小呢?
设置图标大小
调节字体图标的大小是经过元素的font-size属性来控制的;
浏览器演示以下:
固然,使用Unicode的方式也很简单,这里就暂时不演示了。