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

Background image cache under IE6

CSS background image flickering bug in IE6 (backg...

No-nonsense quick start React routing development

Install Enter the following command to install it...

Web design tips on form input boxes

1. Dashed box when cancel button is pressed <br...

10 Website Usability Tips Everyone Should Know

Let’s not waste any more time and get straight to...

Graphic tutorial on installing Ubuntu 18.04 on VMware 15 virtual machine

In the past few years, I have been moving back an...

MySQL 20 high-performance architecture design principles (worth collecting)

Open Source Database Architecture Design Principl...

Vue uses echart to customize labels and colors

This article example shares the specific code of ...

js to realize a simple disc clock

This article shares the specific code of js to im...

Graphical tutorial on installing CentOS 7.3 on VMWare

Illustrated CentOS 7.3 installation steps for you...

How to view and execute historical commands in Linux

View historical commands and execute specified co...

A brief discussion on whether too many MySQL data queries will cause OOM

Table of contents Impact of full table scan on th...