ifont icons and Fontawesome icons

ifont icon

use in html

1. Use the link tag to introduce css
eg:

2. Use the span tag, add 'iconfont icon-XXX'
xxx to the class attribute as the exclusive class name of each icon.

insert image description here
Network references of black and white icons (online use, no download required)
Note: When citing multiple times, just cite the latest link address once

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2261487_roddifsg59f.css">
</head>
<body>
    <span class="iconfont icon-weixin">

    </span>
    
</body>
</html>

insert image description here

References to colored icons

Ways to directly refer to an address

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://at.alicdn.com/t/font_2261487_roddifsg59f.js"></script>
    <style>
        .icon {
      
      
          width: 1em;
          height: 1em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }
        </style>
</head>
<body>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-weixin"></use>
      </svg>
</body>

</html>

insert image description here

used in vue

Preface: It is most convenient to download as png

Download Font class locally (monochrome)

Good compatibility, support ie8+
Compared with unicode, the semantics are clear, and writing is more intuitive. It is easy to tell what this icon is.
Download it locally, and the list of folders after decompression is as follows:

2. Paste the downloaded file into your own project, and remember to put it in the static (or assects directory) file directory, because font icons are also part of static resources.
insert image description here
3. Introduce the Alibaba Cloud font icon css globally in the main.js file, remember to use the correct path

import Vue from "vue";
import App from "./App.vue";
import "./assets/fonts/iconfont/iconfont";

4. Add the following code to the global style sheet

/*  阿里字体图标设置 */
.icon,
.iconfont {
    
    
  font-family: "iconfont" !important;
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

<p> <i class="icon iconfont icon-youjiantou"></i> </p>

insert image description here

Font class online (friendly)

insert image description here

When using multiple references in index.html
, update the address and ensure that the previous icon has not been deleted

<link rel="stylesheet" href="//at.alicdn.com/t/font_1261797_48wm20jf8z.css">

The font icon can be used in the project

<template>    
    <i class="icon iconfont icon-ziyuan"></i>
</template>

insert image description here

Symbol mode (supports multi-color icons)

insert image description here
Paste the downloaded file into your own project

insert image description here
main.js

import "../src/assets/font/iconfont";

app.vue

<style scoped>
/*  阿里字体图标设置 */
.icon {
    
    
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

used in the page

 <p>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-jian"></use>
      </svg>
    </p>

insert image description here