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

怪蜀黍
怪蜀黍
怪蜀黍
30
文章
0
评论
2020-06-2110:35:09 评论 181

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

简介

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

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

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

登录

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

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

图标管理,进入我的项目

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

搜索图标,加入购物车

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

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

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

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

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

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

下载图标

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

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

查看demo_index示例说明

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

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

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

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

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

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

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

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

将图标下载的相关文件都放入css文件夹目录之中,如下:

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

编写HTML,引用图标

demo 说明引入步骤

第一步:引入项目下面生成的 fontclass 代码:

第二步:挑选相应图标并获取类名,应用于页面:


" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

编写html




    





浏览器显示如下:

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

从上图就可以看出成功显示出来下箭头了。

但是从上面代码中的icon-xiajiantou 是从哪里来的呢?

下面来演示一下。

从项目复制图标的代码

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

那么如何调整图标的大小呢?

设置图标大小

调节字体图标的大小是通过元素的font-size属性来控制的;

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

浏览器演示如下:

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

当然,使用Unicode的方式也很简单,这里就暂时不演示了。


怪蜀黍
  • 本文由 发表于 2020-06-2110:35:09
  • 转载请务必保留本文链接:https://www.ki66.com/1277
芝麻信用更新了,央行再次狂怼支付宝! 资讯

芝麻信用更新了,央行再次狂怼支付宝!

         每个月6号都是支付宝蚂蚁信用芝麻分更新的日子,小编经过辛勤的努力,终于涨到了794分。          芝麻信用的确是阿里最为得意的产品之一,依托大数据系统进行信用评级,极大的方便...
宝塔面板升级mysql版本 建站笔记

宝塔面板升级mysql版本

今天客户跟我反馈,新的生产环境中的mysql版本过低,用efcore进行数据库迁移的时候报错,提示当前版本的mysql不支持utf8mb4的字符集。 我回头去确定了一下,服务器的mysql版本是5.1...
MYSQL版本选择 建站笔记

MYSQL版本选择

       准备安装MySQL时,请确定要使用哪个版本和发行格式(二进制或源格式)。首先,决定要安装开发版本还是通用版本(GA)。开发版本具有最新功能,但不建议用于生产环境。GA版本(也称为生产版本...
MySQL版本对比 建站笔记

MySQL版本对比

MySQL版本对比 服务器性能 1.mysql,percona mysql,mariadb均开源,支持分区表,MySQL的存储引擎是innodb,另外两个是xtraDB(性能不是很好) 高可用特性 1...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: