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

仅供学习,转载请注明出处

简介

在制作前端页面的过程中,肯定有不少图标需要查找。本篇文章主要是介绍iconfont阿里巴巴矢量图标库 的使用。

那么讲到使用,首先就是要登录这个矢量图标库,请点击这里进行访问。

登录

在这里我选择使用Github登录。

图标管理,进入我的项目

搜索图标,加入购物车

选择一个下箭头图标,选择加入购物车。

选择购物车的图标,加入项目

好了,上面演示已经新建了项目以及选择了图标。下面就要讲解怎么下载以及使用了。

下载图标

下载之后,可以看到里面有很多文件。

查看demo_index示例说明

使用浏览器打开demo_index.html,可以看到有三种引用方式,如下:

考虑写法比较方便的方式,我才用Font class方式,如下:

下面根据说明,新建一个测试项目引用一下看看。

新建的一个用来测试使用的项目

将图标下载的相关文件都放入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的方式也很简单,这里就暂时不演示了。


推荐阅读更多精彩内容