uniapp introduces iconfont icon library color symbol tutorial

1. Go to iconfont to log in first, then select the icon to add to the shopping cart

 2. Click on the upper corner to add and enter the project

The selected icon will appear in My Items

3. Click to download to the local, then unzip the folder, then switch to uniapp and open the terminal to run

Note: Make sure you have installed node on your computer (you can go to the official website to download Node.js Chinese website if node is not installed )

npm i -g iconfont-tools (if mac users fail, add sudo in front, password is your own power-on password)

4. Switch the terminal to the folder decompressed above and run iconfont-tools

 

 

These can be default or named your own (I named myself)

5. Then an iconfont-demo file will appear in the decompressed folder, open the file and copy the iconfont-demo-icon.css file and add it to the static in the uniapp project

 6. Switch to the style in app.vue and introduce it

@import url('~@/static/iconfont-demo-icon.css');

 

Then you can introduce it on the page through <text class="demo-icon demo-icon-shutiao"></text>

Guess you like

Origin blog.csdn.net/Dajdhushvj/article/details/125494632