如何使用icomoon图标

如何使用icomoon图标

在做页面的时候常常需要各种好看的图标来丰富页面,常见的有Iconfont阿里巴巴矢量图标库icomoon等等。我最常用的就是icomoon,所以今天就来说一下icomoon的用法。

  1. 首先打开 icomoon 的官网
  2. 点击右上角,进入IcoMoon App
    在这里插入图片描述
  3. 进入后,单击选择你想要的图标
    在这里插入图片描述
  4. 选择完成后,点击底部导航栏的 Generate Font在这里插入图片描述
  5. 跳转页面后,选择右下角的Download在这里插入图片描述
  6. 将下载后的压缩包打开,将里面的fonts文件夹和style.css拷贝到你项目下在这里插入图片描述
  7. 打开style.css文件,复制第一段代码,如图 (这一步也可替代将style.css直接引入页面中,就不用复制代码)在这里插入图片描述
    而后,即可在页面上引用
  8. 引用方法:
    在这里插入图片描述
    在这里插入图片描述
  • 在html代码中引用:
    在这里插入图片描述
    结果:在这里插入图片描述
  • 在css中引用
    在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/sanjun_done/article/details/103439080