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

Difference and implementation of JavaScript anti-shake and throttling

How to use Web front-end vector icons

Difference and implementation of JavaScript anti-shake and throttling

About MYSQL, you need to know the data types and operation tables

Install three or more tomcats under Linux system (detailed steps)

How to configure environment variables in Linux environment

Detailed explanation of the parsererror error case in JavaScript solution in ajax

Vue elementUI implements tree structure table and lazy loading

jQuery plugin to implement floating menu

Pure CSS to achieve a single div regular polygon transformation

Example code for implementing a QR code scanning box with CSS

Install MySQL 5.7.17 in win10 system

Recommend

HTML+CSS+JavaScript to make a girlfriend version of scratch card (you will learn it once you see it)

Detailed explanation of how Vue returns values to dynamically generate forms and submit data

CSS3 filter (filter) to achieve the sample code of gray or black mode of web page

Mysql GTID Mha configuration method

Vue implements login jump

How to set a fixed IP address for a VMware virtual machine (graphic tutorial)

Implementation of crawler Scrapy image created by dockerfile based on alpine

Analyze the difference between computed and watch in Vue

Several ways to solve the problem of floating causing the height of the parent element to collapse in CSS

HTML form application includes the use of check boxes and radio buttons

Add a copy code button code to the website code block pre tag

Detailed explanation of the spacing problem between img tags

Docker pull image and tag operation pull | tag

6 Uncommon HTML Tags

Web page HTML code: production of scrolling text