iconfont使用方法

最新推荐文章于 2024-08-21 15:16:29 发布

原创最新推荐文章于 2024-08-21 15:16:29 发布 · 843 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #javascript

前端工具专栏收录该内容

3 篇文章

订阅专栏

本文介绍了阿里妈妈Iconfont的使用方法，包括登录账号、新建项目文件夹、搜索图标、添加到项目、选择fontclass并下载，最后将文件添加到项目中进行使用。

一、iconfont

他来了，他来了，他带着阿里妈妈iconfont字体图标库的使用方法向我们走来了！
首先看一下什么是iconfont：
Iconfont：阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。
敲黑板！敲黑板！敲黑板！
童鞋们手里的iphone都放一放，认真听课了，重点来了。

1.1、使用方法

第一步：登录

还是熟悉的套路，又是熟悉的场景，登录账号！
iconfont登录页面
细心的小伙伴可能会发现，自己貌似只有微博和git账号，然后又忘了自己的git密码，于是果断掏出iphone打开微博一顿狂扫，终于登录成功了！

第二步：新建项目文件夹（存放iconfont）

登录成功后点击 (资源管理)—>(我的项目)
新建项目
根据以上步骤创建好你要接收iconfont的项目文件夹，然后你就会发现你的项目库中出现了你刚才创建的图标项目文件夹。

第三步：开启紧张刺激的找图标环节

然后再搜索框中搜索你想要使用的图标，添加到购物车中去
加入购物车
然后将购物车里自己选择的图标添加到刚才创建的项目文件夹中去
在这里插入图片描述
这样你就可以在你刚才创建的项目文件夹中看到你添加进去的字体图标

第四步：接下来就是选择fontclass，然后下载到本地中去

下载到本地中

第五步：将下载好的文件解压，添加到我们需要使用iconfont的项目文件夹中去

解压后文件夹中的内容如下
解压后目录

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="./iconfont/iconfont.css" />
	</head>
	<body>
		<h1>最美的不是下雨天，是曾与你躲过雨的屋檐</h1>
		<i class="iconfont iconios"></i>
		<span class="iconfont iconiOS"></span>
	</body>
</html>

使用成功
OK了，大功告成！！！！