Three ways to use Alibaba font icons in HTML--iconfont Alibaba vector icon library

I haven’t used the Alibaba icon for a long time. When I suddenly wanted to use it, I found that I couldn’t use it. I could only export the icon png in png format = =

Table of contents

1. Font icon

Method 1. Local use uses Alibaba vector icons through class names.

1. Add the icon to the library

2. Add the icon to the project

3. Download font icon

4. Use files

5. Introduce css into the corresponding HTML page

6. Use font icons

7. Use font icons through class names in HTML

Method 2: Use Alibaba font icons through online links

Method 3. Use font icons through Unicode

4. Precautions

1. Font icon

Font icon: allows us to achieve the effect of simple icons on web pages -- they look like icons

Font icon
- Font icon displays icons, which are essentially fonts
- Working with simple, single-color icons
Advantages of font icons
- Flexibility: Flexibly modify styles, such as size, color, etc.
- Lightweight: small size, fast rendering, and reduced number of server requests
- Compatibility: Compatible with almost all major browsers
- Easy to use

The commonly used font icons should be Alibaba’s vector library, and there is also IcoMoon that I used when I first learned the front-end (I call it big eyeball hahahahaha)

At the same time, there are also font icons in vant.

Here I will write about how to use the Alibaba vector icon in HTML

Method 1. Local use uses Alibaba vector icons through class names.

1. Add the icon to the library

Open the official website and find the icon you want
iconfont-Alibaba Vector Icon Libraryhttps://www.iconfont.cn /

Then find the icon you want, place the mouse on it and select [Into Storage]

Then you can see the add icon in the shopping cart in the upper right corner.

2. Add the icon to the project

Then we come in here

Then add them to the project

Then open the project and you can see the icon in the added project.

ps: If you can’t find your project there, you can find it here

3. Download font icon

Let’s first use how to use font icons locally.

Then get a compressed package and open the compressed package

In this compressed package, the files we need to use are as follows:

and a CSS file

4. Use files

We create a folder called [fonts] in the corresponding HTML folder. This fonts must be at the same level as images and css.

Then put the four files above into the fonts folder

(Actually, I think it’s enough to just unzip them all...otherwise you have to manually select them)

Although there is a CSS file here, do not put it in the css folder. It must be put together with the font icon file. This will facilitate later replacement.

5. Introduce css into the corresponding HTML page

6. Use font icons

Call the class name corresponding to the icon , two class names must be called

iconfontClass: basic styles, including the use of fonts, etc.
icon - xxx : The class name corresponding to the icon

There is an html file in the compressed package we obtained earlier.

Open this html, which contains the downloaded font icon

Then we select [Font class]

Below this HTML file is a user manual

7. Use font icons through class names in HTML

The font icon here needs to pass two class names! iconfont and the corresponding font icon class name, that is, .icon-xxx

<body>
  <i class="iconfont icon-weixin"></i>
  <i class="iconfont icon-bofang"></i>
  <i class="iconfont icon-qq"></i>
</body>

Open it and you will see the font icon

When using font icons, you always use the i tag, and the essence of the font icon is a text font, which can be modified in css through font-size.

Method 2: Use Alibaba font icons through online links

1. Go back to my project and click View Online Link

2. After clicking to generate the code, you will get a css file path.

3. Introduce this css into html

But here you need to splice an http in front of the slash:

  <title>Document</title>
  <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4064327_gs3zto2ml06.css">

4. Use fonts (also used through two classes, iconfont and icon-xxx)

<body>
  <i class="iconfont icon-qq"></i>
  <span class="iconfont icon-bofang"></span>
</body>

1. The icon-xxx code here can be copied from Alibaba’s official website

2. Also add an iconfont class

Method 3. Use font icons through Unicode

1. We choose Unicode on the project

However, there will be a very long css style under this Unicode. Don’t bother with it. Open it.

Fontclass, introduce online css, do not introduce styles given by unicode

  <title>Document</title>
  <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4064327_gs3zto2ml06.css">

2. Then go back to Unicode and copy the code of the icon

3. Use this code with HTML tags

<body>
  <i class="iconfont">&#xe73d;</i>
</body>

Note: the copied code is pasted within the content range of the label, and you also need to declare on the label that this is a font icon, that is, add the iconfont class on it

4. Precautions

On font icons, we are used to using the tag <i>

However, the original intention of this tag is to make the text tilt, but after introducing the font icon, it was found that it was not tilted. This is because a style that does not tilt the text was added to the introduced css.

font-style:normal;

(At the same time, font icons can also be implemented through pseudo-class elements, but I am not used to using pseudo-classes (I just can’t remember it = =))