美文网首页
网页使用小图方法

网页使用小图方法

作者: 鈊謰鈊 | 来源:发表于2022-03-22 20:05 被阅读0次

    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

    相关文章

      网友评论

          本文标题:网页使用小图方法

          本文链接:https://www.haomeiwen.com/subject/eyfqjrtx.html