网页使用小图方法

1.输入http:icomoon.io进入页面
2.进入页面后会看到icomoon App,点击
3.点击想要的图标,如果没有想要的最下面可以点击add icons...进行添加
4.选完之后点击下面的generate font
5.接着点击download即可
6.下载完之后需要解压压缩包,把fonts文件放在跟html、css文件同一个目录的路径
7.接着打开style.css,复制

@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?hquggx');
    src:  url('../fonts/icomoon.eot?hquggx#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.ttf?hquggx') format('truetype'),
      url('../fonts/icomoon.woff?hquggx') format('woff'),
      url('../fonts/icomoon.svg?hquggx#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

到自己的css文件中
8.然后打开解压缩的demo.html文件,复制"\e986"这个图标到自己的html文件

9.如果图标不够用需要添加的情况:
进入icomoon APP页面,点击import icons,然后选择刚才解压缩的selection.json,然后下载完之后替换掉即可

10、使用(这两个必须要)


image.png

你可能感兴趣的:(网页使用小图方法)