Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use the custom icon icon in the iview+vue project". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use the custom icon icon in the iview+vue project".

1. UI designers will upload their own icon library to Alibaba icon library.

Open the icon library address given by the designer and click on all the icons you want to use to add to the shopping cart

two。 Click add to item in the shopping cart

3. Give the project a name.

Click OK, and then click download to local

4. Put the following files in the static of my project

Create a new folder iconfont

5. Global introduction of iconfont.css in main.js

6. Open the demo_index.html in the file you just downloaded

There are three forms of citation. I use class. Just copy the following class name directly.

7. Add icon configuration to my route

I thought it could be displayed normally, but I found that it didn't show at all.

8. Looking at the structure, I found that font-family is still set by default iview.

The icon introduced by yourself needs to be set to font-family: 'iconfont'

9. So to change the settings of font-family

Note that the global settings can no longer be set here. At first, my global settings will cause other iview icons to not be displayed, so find the file corresponding to the left navigation bar and add the inline style to the corresponding structure.

10. This will solve the problem perfectly.

You can introduce custom icons on the left without affecting iview icons used elsewhere

Thank you for your reading, the above is the content of "how to use the custom icon icon in the iview+vue project". After the study of this article, I believe you have a deeper understanding of how to use the custom icon icon in the iview+vue project. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.