Ali vector icons (Font class) are used in the Vue front-end project

1. Login to Alibaba Vector Icon Library
Alibaba Vector Icon Library

2. Click the icon library
insert image description here
3. Select an icon
After selecting an icon, it will enter the icon library of this type, and then draw the icon you want to choose with the mouse, there will be three options, namely "add to library", "favorite" and "download", here we click "add to library"

4. Add to the shopping cart
Click "Add to storage", we will see the icon of the shopping cart in the upper right corner of the page, then click to enter the shopping cart and click
insert image description here
insert image description hereinsert image description here
"Add to item", select the item name and click "OK", we can see the icon in the item
insert image description here
insert image description here
5. Use

1 进入项目后,点击“Font class”,然后点击下载至本地
insert image description here
2 然后解压到文件夹
insert image description here
3 将上面蓝框框住的文件放到你正在写的项目中(放到src/assets目录下,因为是静态资源)
insert image description here
4 在main.js文件内全局引入 阿里云字体图标 css,这里一定要注意路径要正确,要和你上面存放文件的位置对上
insert image description here
5 为避免出现图标方框的情况,需要对font进行初始化,在全局样式文件中加入如下代码
insert image description here
6 在项目中,鼠标划上你要使用的图标,然后点击“复制代码”,即可复制该图标的类,然后在你的项目中使用
insert image description here
7 还可以给该图标添加样式,目前可以添加颜色和字体大小两种样式
insert image description here
六、注意事项
该方法是单色图标,不支持多色图标,简单来说,你加入的图标颜色很丰富,但是使用到项目中却只能显示黑色,你可用通过上面的添加样式来简单的改变颜色和字体大小

Guess you like

Origin blog.csdn.net/Selina_lxh/article/details/129010290