How to use Alibaba Vector Icon

1. Open the official website of Alibaba vector icon library （https://www.iconfont.cn/）, You can log in directly if you have an account , If you don't have an account, you need to register one .
2. Find the icon you want .

Easy to use

If you just need oneortwo icons ： For example, you want to reverse the triangle , Search directly “ Inverted triangle ”, The corresponding icon appears , Click on the desired icon ” download “ Button

Then a pop-up box will appear , Here you can choose the color you want

You can select the corresponding download format ：
（1） If choose PNG Format , Download the picture directly html Insert .（ Image file URL Depending on the location of your picture . Here are html The same directory as the picture file ）

<img src="/1.png" alt="">

（2） If you click “ Copy SVG Code ” Button , Put the copied code directly in html Paste in .（ For a long , I don't recommend ）

<svg t="1630999448373" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3389" data-spm-anchor-id="a313x.7781069.0.i1" width="200" height="200"><path d="M1024 255.996 511.971 767.909 0 255.996 1024 255.996z" p-id="3390"></path></svg>

Mass use

If you need Alibaba vector icon library in large quantities , Icons can be added to the project ：

Then enter “ My project ”,

（1） Local use

Click on “ Download to local ” Button

After the downloaded file is unzipped , It looks like this inside ：

Let me use the simplest example to show three ways to use vector icons ：

In the element through link The element is imported into the file just downloaded and unzipped iconfont.css file

<link href="font/iconfont.css" rel="stylesheet" type="text/css" />

<1> Mode one Unicode

Copy the desired icon Unicode（ As shown in the figure above ）, then

<i class="iconfont">&#xe62a;</i>

Immediate effect ：

<2> Mode two Font class

Copy the class name of the required icon （ As shown in the figure above ）, then

<i class="iconfont icon-daosanjiao"></i>

（ Be careful ： Element can't just add the class name of the icon you want to display , Remember to add the class name iconfont.）
Immediately show the same results

<3> Mode three Symbol

Introduce... At the bottom of the label js file

<script src="font/iconfont.js"></script>

html

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

css

.icon{
    
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

（2） Online links use

Copy the code shown in the above two figures , On the basis of local use , Will introduce js and css Replace with the following ：

（ The benefits of online links are , You don't have to download the icon every time you add an icon to the icon library as you would for local use ）