How to use small vector icons in web front end

Time:2020-3-11

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.
How to use small vector icons in web front end

The second step:Then join the shopping cart
How to use small vector icons in web front end

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
How to use small vector icons in web front end

The fourth step:Next, you will see the following page, copy the code, and refer to the document of the code.
How to use small vector icons in web front end

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

The fifth step:Remember to add“ http:
How to use small vector icons in web front end

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.
How to use small vector icons in web front end

<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.
How to use small vector icons in web front end

The second step:After downloading, you can see some files in the folder, and introduce JS files into the code page.
How to use small vector icons in web front end

 <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
How to use small vector icons in web front end

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”
How to use small vector icons in web front end

  <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:How to use small vector icons in web front end

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

Recommended Today

Internal and external connections in PostgreSQL to implement operations

Test data: City Table: create table city(id int,name text); Insert into city values (0, ‘Beijing’), (1, ‘Xi’an’), (2, ‘Tianjin’), (3, ‘Shanghai’), (4, ‘Harbin’), (5, ‘Tibet’) Person table: create table person(id int,lastname char(20)); insert into person values(0,’Tom’),(2,’Lily’),(3,’Mary’),(5,’Coco’); select * from city; select * from person; 1: Internal connection: 1.inner join Inner join returns only rows with […]