多语言展示
当前在线:1166今日阅读:176今日分享:34

如何使用自定义的图标

很多做开发的小伙伴应该知道 , 有时候想找到个合适的或者比较好看的免费图标一般都比较困难。现在阿里巴巴推出了免费的图标库 , 小粥试了一下 , 感觉比较好操作 , 现在分享给大家。
工具/原料

可以上网的电脑

方法/步骤
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

为了方便下次寻找,您可以点击“收藏”收藏本经验。

推荐信息