Vue + Element UI implements permission management system front-end (11): Third-party icon library
Use third-party icon libraries
Anyone who has used Element knows that the font icons provided by Element UI are very few, which is really not enough. Fortunately, there are many rich third-party icon libraries available, and introducing them will not be very troublesome.
Font Awesome
Font Awesome provides 675 scalable vector icons that can be changed using all the features provided by CSS, including size, color, shadow, or any other supported effects.
The usage of Font Awesome 5 is quite different from the previous version. The functions are more powerful and the icons are richer, but the usage has also become more complicated.
I still prefer the previous way of using it. It is easy to install and use. After all, my needs are not that complicated. I just have simple icons available.
There are many related introductions online, so I won’t go into nonsense here. For more details, please see the official website:Font Awesome, an excellent set of icon font libraries and CSS frameworks
Install dependencies
Execute the following command to install the font-awesome dependency.
npm install font-awesome --save
Project introduction
Introduce css dependency into project main.js.
import 'font-awesome/css/font-awesome.min.css'
Page usage
After the project is introduced, it can be used directly on the page.
Test effect
See, it’s so simple and easy to use. This is also my favorite way to use it.
In addition, you can also choose CDN method, download method, etc., which I won’t go into here. If you are interested, you can check it out by yourself.
Official website:Font Awesome, an excellent icon font library and CSS framework
For how to use Font Awesome 5, please refer to
Government curriculum:Font Awesome
Noodlewar: vue.js - Vue uses Font Awesome 5 - Personal article - SegmentFault 思发
iconfont
iconfont is an icon library provided by Alibaba.
Official website:iconfont-Alibaba vector icon library
log in Register
First go to the official website to register an account and log in.
New Project
Site selection icon management, my project.
Click the New Project button on the right to create a new project.
Enter the project-related information, making sure that the prefix does not conflict with the existing project.
Select icon
Enter the icon library and select your favorite icon library.
Enter the icon library and select your favorite icons to add to the shopping cart. Because there is no batch addition, one click is simply terrible. Enter the following command in the console to add in batches.
var icons = document.querySelectorAll('.icon-gouwuche1');
var auto_click = function(i) { if (i < icons.length) {
setTimeout(function() { icons.item(i).click(); auto_click(i + 1); }, 600); } };
auto_click(0);
After executing the above command, the command will automatically add the icon to the shopping cart, and then just wait for it to complete.
Once completed, click on the shopping cart and select Add to Project
Download material
Select the font class and download it locally.
Change setting
Unzip the downloaded file and open iconfont.css.
Add the following code, note: kt-icon is the icon prefix set previously, and there is a space in front of the second kt-icon.
[class^="kt-icon"],
[class*=" kt-icon"]
{
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Add notes as shown below.
Project introduction
Create a new icon directory under the project assets.
Introduce css styles in main.js.
import '@assets/iconfont/iconfont.css'
Open the iconfont project, select the icon, and copy the code.
The page introduces related icon class code.
Test effect
Start the project and the display effect is as follows.
iconMoon
iconMoon is another excellent third-party icon library.
Instructions for use can be found at:
Use iconMoon icon in vue project
What is the use of icomoon and how to use it_1gao_gao1's blog-CSDN blog