当前位置: 七九推 > 互联网>阿里 > iconfont-阿里巴巴矢量图标库使用教程

iconfont-阿里巴巴矢量图标库使用教程

2022年06月23日 阿里 我要评论
iconfont-阿里巴巴矢量图标库使用教程 文章目录 iconfont-阿里巴巴矢量图标库使用教程一、前言二、使用步骤三、运行效果 一、前言 iconfont-阿里巴巴矢量图标库 矢量化图标

iconfont-阿里巴巴矢量图标库使用教程

一、前言

  1. 图标矢量化我们在最初推行 iconfont 的时候就是为了在Retina设备上也能「丝般柔滑」,这一点图片需要另外制作两倍图,而且缩放后立马就「有码了」。在制作上,不单单是图标设计为两倍就完事了,需要在整个页面设计的时候就要是两倍尺寸的,这对于设计师来说,成本太大(虽然这是趋势)。

  2. 让样式回归CSS具体而言,就是指使用iconfont后,因为图标就是字体。我们可以用CSS来灵活控制图标的大小、颜色、阴影等。传统的 CSS Sprites 我们只能重新设计后再「切图」,虽然现在有很多自动拼合工具,但是依然繁琐。进一步的,如果不用兼容IE6-7后,我们完全可以用CSS伪元素来生成图标。也就是说假如图标编码改变了,不用再改动HTML中的编码,只用修改 content 中的编码,达到真正目的上的CSS来控制图标。

  3. 图标规范化通过iconfont平台,我们可以高效快速的生产出规范的图标。现在可以直接通过平台上传SVG或ESP文件,就可以转换成字体图标了。

  4. 自动上传到阿里云CDN通过平台生成的字体,自动存储到阿里云CDN,免费加速。

  5. 流量最小化在移动设备,节约流量是我们前端把控用户体验关键而又容易忽视的一个环节。通常一个项目中,我们并不需要一套大而全图标库,也许我只是需要其中的一个关闭按钮(o)/~。通过平台可以点选自己需要的图标,重新生成一份字体,减少字体体积,节约流量的同时带来更快的加载速度。

二、使用步骤

1.打开iconfont-阿里巴巴矢量图标库,搜索图标,选择合适的图标批量加入购物车(如果是单个矢量图直接下载也可以)
在这里插入图片描述

2.在右侧点击购物车

image-20211226204901441

3.在购物车中,推荐是使用添加项目,在账户内新建一个项目下次使用的时候,方便下载。这里我们用作HTML开发所以点击下载代码。(下载素材是用于SVG、AI、PNG的)
在这里插入图片描述

4.下载项目需要的矢量图,第三步点击下载代码可以跳过这步。

在这里插入图片描述

5.将下载好的压缩包解压,以下文件全部导入HTML项目下css文件中

image-20211226205658807

7.在iconfont.css中可以设置图标的样式,这里我默认,一般不作修改。

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

如果想单独修改某个图标的大小样式,可以为span标签单独设置一个class

.iconfont2 {
	font-family: "iconfont" !important;
	font-size: 160px;
	font-style: normal;
	color: #BD2C00;
	background-color: #B3D4FC;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

8.在HTML文件中,第六行导入刚刚下载的iconfont.css,第九行挑选相应图标并获取字体编码,应用于页面
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/iconfont.css">
	</head>
	<body>
		<span class="iconfont">&#xe71c;</span>
		<span class="iconfont2">&#xe606;</span>
		<span class="iconfont">&#xe645;</span>
		<span class="iconfont">&#xe609;</span>
	</body>
</html>

三、运行效果

image-20211226222451718

(0)
打赏 微信扫一扫 微信扫一扫

相关文章:

  • 支付宝怎么绑定驾驶证?支付宝绑定驾驶证最新教程

    很多新手拿到驾照的时候想要将驾驶证绑定到支付宝上,那么今天小编就来教大家如何绑定,感兴趣的小伙伴就来学习一下吧。支付宝 for android v10.2.28 安卓手机版类型:生…

    2022年06月23日 阿里
  • 百度贴吧怎么清空浏览历史?

    大家都知道,百度贴吧是以兴趣主题聚合志同道合者的互动平台,那么怎么清空浏览历史呢,感兴趣的朋友不要错过了。方法1、在手机桌面点击【百度贴吧】图标2、进入贴吧后点击【我的】栏3、切换…

    2022年06月23日 阿里
  • 2021年4月20日700G福利码大全 最新阿里云盘福利码

    2021年4月20日700G福利码大全 最新阿里云盘福利码

    阿里云盘4月20日福利码是什么?全新可用的福利码来了哟,还没有领取的小伙伴赶紧来领取。这次的福利码一共有三个,一共可以扩容700g。是不是很激动呢?下面就来给大... [阅读全文]
  • Keep怎么查看个人账号二维码?Keep查看个人账号二维码教程

    keep怎么查看个人账号的二维码?很多小伙伴想要将自己keep上的个人账号二维码分享给好友,下面小编就教大家如何查看keep个人账号的二维码。keep健身软件 for androi…

    2022年06月23日 阿里
  • 会声会影怎么删除字幕? 会声会影去掉字幕的技巧

    会声会影如何删除字幕?该怎么删除字幕呢?下面我们就来看看会声会影删除字幕的技巧。开启“会声会影”软件。进入编辑区。导入项目文件。找到标题栏。鼠标右键单击要删…

    2022年06月23日 阿里
  • 云闪付怎么刷地铁? 地铁乘车码开通教程

    云闪付怎么刷地铁? 地铁乘车码开通教程

    云闪付绑定银联卡进行支付等,最近武汉地铁接通了云闪付,用户可以开通乘车码坐地铁,云闪付怎么刷地铁,小编为大家带来地铁乘车码开通教程。云闪付地铁乘车码开通教程银联... [阅读全文]

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2022  七九推 保留所有权利. 粤ICP备17035492号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com