How to use Web front-end vector icons

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

Recommend

Detailed explanation of MySQL persistent statistics

1. The significance of persistent statistical inf...

Install Centos7 using Hyper-v virtual machine

Table of contents introduce Prepare Download syst...

Source code reveals why Vue2 this can directly obtain data and methods

Table of contents 1. Example: this can directly g...

How to use vuex in Vue project

Table of contents What is Vuex? Vuex usage cycle ...

Linux unlink function and how to delete files

1. unlink function For hard links, unlink is used...

Detailed tutorial on downloading, installing and configuring the latest version of MySQL 8.0.21

1. Download 1. Download the installation package ...

Installation tutorial of docker in linux

The Docker package is already included in the def...

MYSQL slow query and log example explanation

1. Introduction By enabling the slow query log, M...

Summary of MySQL data migration

Table of contents Preface: 1. About data migratio...

Use docker to deploy tomcat and connect to skywalking

Table of contents 1. Overview 2. Use docker to de...

The perfect solution to the error of installing Mysql Applying Security in windows server2014

The reason is that it was not uninstalled cleanly...

uniapp project optimization methods and suggestions

Table of contents 1. Encapsulate complex page dat...

7 interview questions about JS this, how many can you answer correctly

Preface In JavaScript, this is the function calli...

Detailed example of MySQL joint table update data

1.MySQL UPDATE JOIN syntax In MySQL, you can use ...

Detailed explanation of data transmission between React parent components and child components

Table of contents 1. Parent component passes data...