How to use small vector icons in web front end

Preface

When writing front-end pages, we often use some small icons and other pictures. If we use pictures, the code is more cumbersome. Recently, we found a convenient and practical method, which can be used directly.

1、 Introduce image operation method

First, we input the website: https://www.iconfont.cn/
I can’t remember that this website can also be searched by Baidu:Alibaba vector map, will come out of this website;
Below I recommend two more common and convenient methods.

Method 1: font class reference

Good compatibility, support IE8 +, and all modern browsers.
Because class is used to define the icon, only the image name reference in class needs to be modified when replacing the icon.
However, because the font is still used in essence, multi-color icons are not supported.

Step one:Enter the website, we can see a search box, directly enter the name of the icon you want, or you can find it in the icon library.

The second step:Then join the shopping cart

The third step:Click the shopping cart to create a new item. Make sure that if you want to add pictures to the same item, you don’t need to create again

The fourth step:Next, you will see the following page, copy the code, and refer to the document of the code.

<link rel="stylesheet" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">

The fifth step:Remember to add“ http: ”

The sixth step:Select the corresponding icon and get the class name copy and paste. Use class = “iconfont” to copy the picture name, and apply it to the page to achieve the effect.

<body>
<i  class\="iconfont  icon-xxx"></i>
</body>

Method 2: symbol reference

It is a new way of use, and it is also the recommended use at present. The website also has relevant introduction for reference. Compared with method 1 above, it has the following characteristics:
Multi color icons are supported, no longer limited by monochrome.
Through some techniques, support to adjust the style through font size and color, just like font.
Poor compatibility, support IE9 +, and modern browser.
The performance of browser rendering SVG is not as good as PNG.

Step one:If you want to use more than one icon for a project, you can also select the icons to be used together and add them to the shopping cart, click update code, and then update the code reference connection. This method needs to be downloaded locally.

The second step:After downloading, you can see some files in the folder, and introduce JS files into the code page.

 <link rel="stylesheet" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">
    <script></script>

The third step:Put the package in the same directory as the project, so that the reference to the icon will take effect

The fourth step:In the same way, we need to copy and paste the image name under the icon in SVG, change the href = “change the name”

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

The fifth step:In the code page, we need to introduce a piece of style code in addition to the above two file addresses.

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

Here are all the codes for reference

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    < title > Alibaba vector diagram < / Title >
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">
    <script></script>
</head>
<style>
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>

<body>
    < input type = "text" placeholder = "search" >
    <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-079aiqing"></use>
        </svg>
</body>
</html>

Code effect:

Conclusion:

The first method, which can be used directly, is fast and convenient, does not need to be downloaded, and is relatively convenient to use. The disadvantage is that it can only be used alone and does not support color.
The second method, multi-color support, as well as the introduction effect of multiple pictures will be better, the disadvantage needs to be downloaded to the local file package, and must be placed in the same directory to use.
Generally speaking, Alibaba vector map is very helpful for front-end developers, and it is still free to use. The above methods can be used according to your own needs.

Author: Tang Qingli

Date: December 29, 2019

Wechat: lenat666