Use of font ICONS

Advantages of font ICONS:

  • Flexibility: Flexibility in changing styles, such as size, color, etc
  • Lightweight: small size, fast rendering, reduce the number of server requests
  • Compatibility: Almost compatible with all major browsers

Icon library

Iconfont: www.iconfont.cn/

Method of use

Unicode method

  1. Start with the iconfont. CSS file
  2. Copy and paste the Unicode encoding corresponding to the icon
  3. Setting the text font
<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        span {
            font-family: "iconfont";
            font-size: 50px;
            color: brown;
        }
        
        .s2 {
            color: green;
        }
    </style>
</head>

<body>
    <span>&#xe665;</span>
    <span class="s2">&#xe666;</span>
</body>

</html>
Copy the code

The name of the class reference

  1. Start with the iconfont. CSS file

  2. To call the class name corresponding to the icon, two class names must be called

    Iconfont class: Basic styles, including the use of fonts, etc

    Icon-xxx: indicates the class name of the icon

  3. Setting the text font

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>

        .s2 {
            font-size: 50px;
            color: red;
        }
    </style>
</head>

<body>
    <span class="iconfont icon-arrow-up-circle"></span>
    <span class="iconfont icon-arrow-right-circle s2"></span>
</body>

</html>
Copy the code

Now let’s do a shopping cart example

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .s2 {
            font-size: 50px;
            color: red;
        }
    </style>
</head>

<body>
    <span class="iconfont icon-arrow-up-circle"></span>
    <span class="iconfont icon-arrow-right-circle s2"></span>
</body>

</html>
Copy the code