zoukankan      html  css  js  c++  java
  • CSS字体图标使用方式

      1、地址:https://icomoon.io/app/#/select

      2、选择并下载

      3、解压并copy进工程

        下载后的文件为icomoon.zip,解压后如下:

      4、使用图标字体

      打开demo.html,将需要的图标复制到代码中,如下,粘贴到<i></i>之间

    <div>显示图标:<i></i></div>
    <div>显示图标:<i></i></div>
    <div>显示图标:<i></i></div>
    <div>显示图标:<i></i></div>
    <div>显示图标:<i></i></div>
    <div>显示图标:<i></i></div> 
    div {
             200px;
            height: 50px;
            line-height: 50px;
            background-color: skyblue;
            text-align: center;
    }
    @font-face {
        font-family: 'icomoon';
        src:  url('./fonts/icomoon.eot?624jb');
        src:  url('./fonts/icomoon.eot?624jb#iefix') format('embedded-opentype'),
        url('./fonts/icomoon.ttf?624jb') format('truetype'),
        url('./fonts/icomoon.woff?624jb') format('woff'),
        url('./fonts/icomoon.svg?624jb#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: block;
    }
    i {
        font-family: "icomoon";
        font-style: normal;
    }   

      5、结果如下:

  • 相关阅读:
    ASFNU SC Day6
    ASFNU SC Day3
    ASFNU SC Day2
    ASFNU SC Day1
    2017-9-3 校内模拟T2取数win
    2017-9-3 校内模拟T1卡片card
    (补题)苗条的树(poj_3522)
    跳跳棋(9018_1563)(BZOJ_2144)
    Java之JSP和Servlet基础知识。
    JSP中的九大内置对象
  • 原文地址:https://www.cnblogs.com/javasl/p/15792693.html
Copyright © 2011-2022 走看看