0
点赞
收藏
分享

微信扫一扫

在自己的前端项目(例如vue项目)中使用阿里矢量图标的步骤


一、准备工作:

1、先把vue项目的打包文件dist 删除

2、登录阿里矢量图标官网,搜索项目中所需要的那些图标,然后添加到购物车

3、新建项目:项目名就起一个你vue项目的名字吧,方便下次需要用到那些图标时,也可以直接找到哦

4、将需要的图标添加到咱的项目中

5、下载到本地

6、在项目中使用:引入样式,只需引入iconfont.css 样式即可直接通过通过前缀和class名使用[ demo_index.html 和 demo.css 文件跟项目无关,它的作用是用来查看样式名称和对应图标]


● 新建项目步骤:

在自己的前端项目(例如vue项目)中使用阿里矢量图标的步骤_ico

在自己的前端项目(例如vue项目)中使用阿里矢量图标的步骤_css_02

在自己的前端项目(例如vue项目)中使用阿里矢量图标的步骤_新建项目_03

● 将需要的图标添加到咱的项目中:

在自己的前端项目(例如vue项目)中使用阿里矢量图标的步骤_新建项目_04

● 下载到本地:

在自己的前端项目(例如vue项目)中使用阿里矢量图标的步骤_新建项目_05

● 在项目中使用:

在自己的前端项目(例如vue项目)中使用阿里矢量图标的步骤_新建项目_06

● 在项目中使用,只需引入iconfont.css 样式:

在自己的前端项目(例如vue项目)中使用阿里矢量图标的步骤_ico_07

● 直接通过通过前缀和class名使用:

在自己的前端项目(例如vue项目)中使用阿里矢量图标的步骤_ico_08

● 在项目中查看样式名称和对应图标:

在自己的前端项目(例如vue项目)中使用阿里矢量图标的步骤_css_09


作者:一乐乐​


举报

相关推荐

0 条评论