如何使用自定义的图标

 时间: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、到此 , 使用阿里巴巴图标已完成 , 如果有不明白的 , 可以给我留言奥。

  • AI波浪线组合
  • ai渐变工具怎么用,ai渐变色怎么调
  • ai修饰文字怎么使用?
  • Ai绘制网页图标
  • Adobe Illustrator物体位移路径的设置
  • 热门搜索
    竖弯怎么写 群发微信怎么发 鱼香茄子的家常做法 猪肚汤的做法 蕴怎么读 薅怎么读 烤乳猪的做法 萝卜汤的做法 茶树菇的做法 烤麸的做法