网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 时尚美容

如何使用自定义的图标

时间:2024-10-13 03:07:04

1、登录阿里巴巴图标网 , 最好先登录 , 不然后期在进行其他操作的也免不了要登录的。要登录的话 , 右上角有掬研疔缎图标标识 , 小粥已经帮您指出啦。目前的登录方式有三种:GitHub、阿里域账号(仅限阿里员工使用)、新浪微博。选择一种你可以登录的方式 , 额 , 要是都没有的话 , 那你可能需要去注册一个了。

2、在搜索框中输入你想查询的图标 , 例如我输入 "粥" , 回车 , 则会出现关于 "粥"的图标。

如何使用自定义的图标

3、选择自己喜欢的图标 , 鼠标经过会一次出现添加入库、收藏、下载图标。我们选择第一个 , 然后右上角会出现一个红色图标 , 然后点击它。

如何使用自定义的图标如何使用自定义的图标

4、在右侧弹出的框中 , 选择添加至项目(此处如果你没有项目名的话, 可以新建一个),然后按照步骤一步步。

如何使用自定义的图标

5、然后在当前页面点击, 查看在线链接。则会有 ttf、svg、woff等类型可以使用。选择一个下载到你本地。例如我选择的是 ttf 格式。

如何使用自定义的图标

6、你的css文件的内容可以为下图所示:注意 1、ttf 文件是你刚刚从阿里巴巴图库下载的文件 2、我此处的icon-video 类名 对应 你鼠标滑过图标编辑时设置的名字。

如何使用自定义的图标如何使用自定义的图标

7、在你 html或者其他文件使用这个图标时 ,代码例子为:<i class=&孥恶膈茯quot;iconfont icon-zhou">前者iconfont 类名是必须有的 , 后者跟你 css文件 设置的一致。

8、到此 , 使用阿里巴巴图标已完成 , 如果有不明白的 , 可以给我留言奥。

© 2025 智德知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com