How to use Web front-end vector icons

Preface

When writing front-end pages, we often use pictures such as small icons. If we use pictures, the code is more troublesome to write. Recently, I found a convenient and practical method that can be used directly.

1. Introducing picture operation methods

First we enter the URL: https://www.iconfont.cn/
If you can't remember this URL, you can also search on Baidu: Alibaba vector map, and this URL will appear;
Below I recommend two more commonly used and convenient methods.

Method 1: font-class reference

Good compatibility, supports IE8+ and all modern browsers.
Because the class is used to define the icon, when you want to replace the icon, you only need to modify the image name reference in the class.
However, because it is essentially still using fonts, multi-color icons are still not supported.

Step 1: When we enter the website, we can see a search box. Directly enter the icon name you want, or you can search in the icon library.

Step 2: Then add it to the shopping cart.

Step 3: Click the shopping cart to create a new item and confirm. If you want to add pictures to the same item later, you don’t need to create it again.

Step 4: The following page will appear. Copy the code and reference the code document.

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

Step 5: When importing the code, remember to add " http: "

Step 6: Select the corresponding icon and get the class name, copy and paste it, use no-referrer" src="/img/bVbB5hz/view" src="https://cdn.segmentfault.com/v-5e05cb79/global/img/squares.svg" title="image.jpg">

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

Method 2: symbol reference

This is a new way of usage and is currently recommended. The website also has relevant introductions for reference. Compared with the above method 1, it has the following characteristics:
Supports multi-color icons, no longer limited to single color.
Through some techniques, it is possible to adjust the style through font-size and color just like fonts.
The compatibility is poor, supporting ie9+ and modern browsers.
The browser's performance in rendering SVG is average, even worse than PNG.

Step 1: If a project needs to use multiple icons, you can also select the icons you want to use and add them to the shopping cart, then click Update Code, and then update the code reference link. This method needs to be downloaded locally.

Step 2: After downloading, you can see some files in the folder and introduce the js file on the code page.

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

Step 3: Put the file package in the same directory as the project so that the icon reference can take effect.

Step 4: In the same way, we copy and paste the image name in the svg file below the icon we need to reference, and replace href="change name".

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

Step 5: In the code page, in addition to importing the above two file addresses, we also need to import a style code.

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

Here is the full code 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 image</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">
    <script src="iconfont.js"></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:

Summarize:

The first method can be used directly by importing. It is quick and convenient, does not need to be downloaded, and is relatively easy to use. However, its disadvantage is that it can only be used in a single way and does not support colors.
The second method supports multiple colors, and the effect of introducing multiple pictures will be better. The disadvantage is that it needs to be downloaded to a local file package and must be placed in the same directory before it can be used.
In general, Alibaba vector graphics are very helpful to front-end developers, and they are free to use. You can use the above methods according to your needs.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Pure CSS to solve the ceiling and bottom suction in H5 layout implementation steps

>>: Summary of all HTML interview questions