很多做开发的小伙伴应该知道 , 有时候想找到个合适的或者比较好看的免费图标一般都比较困难。现在阿里巴巴推出了免费的图标库 , 小粥试了一下 , 感觉比较好操作 , 现在分享给大家。
工具/原料
可以上网的电脑
方法/步骤
1
登录阿里巴巴图标网 , 最好先登录 , 不然后期在进行其他操作的也免不了要登录的。要登录的话 , 右上角有图标标识 , 小粥已经帮您指出啦。目前的登录方式有三种:GitHub、阿里域账号(仅限阿里员工使用)、新浪微博。选择一种你可以登录的方式 , 额 , 要是都没有的话 , 那你可能需要去注册一个了。
2
在搜索框中输入你想查询的图标 , 例如我输入 "粥" , 回车 , 则会出现关于 "粥"的图标。
3
选择自己喜欢的图标 , 鼠标经过会一次出现添加入库、收藏、下载图标。 我们选择第一个 , 然后右上角会出现一个红色图标 , 然后点击它。
4
在右侧弹出的框中 , 选择添加至项目(此处如果你没有项目名的话, 可以新建一个),然后按照步骤一步步。
5
然后在当前页面点击, 查看在线链接。则会有 ttf、svg、woff等类型可以使用。选择一个下载到你本地。例如我选择的是 ttf 格式。
6
你的css文件的内容可以为下图所示:注意 1、ttf 文件是你刚刚从阿里巴巴图库下载的文件 2、我此处的 icon-video 类名 对应 你鼠标滑过图标编辑时设置的名字。
7
在你 html或者其他文件使用这个图标时 ,代码例子为:前者 iconfont 类名是必须有的 , 后者跟你 css文件 设置的一致。
8
到此 , 使用阿里巴巴图标已完成 , 如果有不明白的 , 可以给我留言奥。
注意事项
1
如果您觉得本经验有帮助,请点击正下方的投票或左上角的“大拇指”也可以“分享”或“关注TA”给我支持和鼓励。
2
如果帮到了您 , 请您为我投一票给我以支持和鼓励。
3
为了方便下次寻找,您可以点击“收藏”收藏本经验。