About using Alibaba's iconfont vector icon in Vue

About using Alibaba's iconfont vector icon in Vue

There are many import methods on the Internet, and the official also provides three import methods, but most people will not display after importing, or cannot customize the style. The following method will not have the above problems and is currently the best way to introduce.

1. The website of Alibaba vector library requires login before use. Please register and log in first.

2. After logging in, search for the icon you want, such as user, shopping cart, etc.

insert image description here

3. Move the mouse to the desired icon and click "Add to Library". It is recommended not to directly import it by copying the SVG code or other import methods. It is best to add it to the library first and then download it.

insert image description here

4. Open the shopping cart in the upper right corner of the website and click the icon you selected to "Add to Items"

insert image description here

5. Download to local, you will get a compressed package, unzip it to the current folder

insert image description here

6. The following contents will appear. Copy all files except the one starting with demo into the "iconfont" folder under the "asset" folder of the project. If there is no such folder, create a new folder yourself.

insert image description here

insert image description here

7. Next, use a browser to open the demo_index.html in the unzipped folder. These codes correspond to each icon and will be used later.

insert image description here

8. Write this in the code, and your project webpage will display the first icon, the icon corresponding to the above picture == &#xe601 ==

<template>

 <span class="iconfont">&#xe601;</span>
<template>

<script>
    import '../asset/iconfont/iconfont.css'; //This is the path to your iconfont.css, which may be different from mine</script>

9. To modify the icon style, just modify the .iconfont class in the style tag.

<template>

 <span class="iconfont">&#xe601;</span>
<template>

<script>
    import '../asset/iconfont/iconfont.css'; //This is the path to your iconfont.css, which may be different from mine</script>


<style>
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

10. Finished. On which page you want to use the icon, just import '../asset/iconfont/iconfont.css'; on that page.

11. Notice If you want to add some new icons from Alibaba Vector Library, you need to delete the iconfont folder in the project and start again from step 2 of this article, select, download, and import

This is the end of this article about Vue using Alibaba's iconfont vector icons. For more relevant Vue vector icon content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Solve the problem of iconfont file path after webpack packaging of vue-cli project
  • How to use VUE to call Ali Iconfont library online
  • Elegant practical record of introducing iconfont icon library into vue
  • vue project, code submitted to code cloud, iconfont usage instructions
  • How to use iconfont in vue and mini program projects
  • Vue file uses iconfont parsing

<<:  HTML meta usage examples

>>:  How to import Tomcat source code into idea

Recommend

HTML head tag detailed introduction

There are many tags and elements in the HTML head ...

Detailed explanation of HTML form elements (Part 1)

HTML forms are used to collect different types of...

Mycli is a must-have tool for MySQL command line enthusiasts

mycli MyCLI is a command line interface for MySQL...

VUE+Canvas implements the sample code of the desktop pinball brick-breaking game

Everyone has played the pinball and brick-breakin...

How to run py files directly in linux

1. First create the file (cd to the directory whe...

MySQL database rename fast and safe method (3 kinds)

Table of contents How to rename MySQL database Th...

XHTML language default CSS style

html,address, blockquote, body,dd,div, dl,dt,fiel...

The most basic code for web pages

◆Add to favorites illustrate Click to add your we...

CSS horizontal progress bar and vertical progress bar implementation code

Sometimes it’s nice to see some nice scroll bar e...

Detailed process of modifying hostname after Docker creates a container

There is a medicine for regret in the world, as l...

Independent implementation of nginx container configuration file

Create a container [root@server1 ~]# docker run -...

HTML uses marquee to achieve text scrolling left and right

Copy code The code is as follows: <BODY> //...

Building a KVM virtualization platform on CentOS7 (three ways)

KVM stands for Kernel-based Virtual Machine, whic...

How to try to add sticky effect to your CSS

Written in front I don’t know who first discovere...

What are mysql dirty pages?

Table of contents Dirty pages (memory pages) Why ...