单个图标

  • 1. 进入阿里云矢量图标库的地址https://www.iconfont.cn
  • 2.进入网站,选取某一个或多个点击你需要的图标 -> 添加入库。添加入库后点击购物车,添加至项目即可,名称自定。
  • 3.点击生成代码,复制代码。在html文档(如标签中,和引用外部CSS文件一致)添加以下代码
    <link rel="stylesheet" href="http://需要引用的CSS代码">
  • 4.完成后,在你需要添加矢量图标的位置插入标签,如图所示:
    <i class="iconfont 你的矢量图标名称"></i>
  • 5.此时可以通过style样式设置矢量图标的大小和颜色,使用font-size属性控制图标大小,color控制其颜色

多个图标

  • 1.进入我的项目,点击下载到本地
  • 2.下载完成后文件目录如下:
  • 3.在自己的HTML中引入上面的iconfont.css文件
  • 4.在阿里云适量图标网站中我的项目找到要使用的图标类名
  • 5.在HTML中添加以下代码
    <i class="iconfont 你的矢量图标名称"></i>
  • 6.此时可以通过style样式设置矢量图标的大小和颜色,使用font-size属性控制图标大小,color控制其颜色
最后修改日期:2020-07-13

作者

留言

小菜鸟 

学习了,哈哈哈!

撰写回覆或留言

发布留言必须填写的电子邮件地址不会公开。