iconfont阿里巴巴矢量图标库从注册到使用

时间 2019-11-17

标签 iconfont 阿里巴巴矢量图标注册使用栏目阿里巴巴繁體版

原文原文链接

仅供学习，转载请注明出处css

简介

在制做前端页面的过程当中，确定有很多图标须要查找。本篇文章主要是介绍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的方式也很简单，这里就暂时不演示了。