vue3项目引入第三方图标(阿里图标)

  1. 先将需要的图标添加到仓库

  1. 点击下载到本地

  1. 将压缩包解压出来

  1. 将iconfont.css文件复制到你的项目中的public/iconfont的文件夹中

  1. 在阿里图标库中复制图标路径(@font-face),替换掉iconfont.css中的@font-face

注意替换后的路径是不对的,需要加上http:

  1. 在项目的入口文件index.html中进行引入我们第三方图标




说明:引入第三方图标在线引入是在阿里图标中复制图标路径

  1. 使用,在你需要引入图标的页面中使用就行了

说明:i标签中的类名一定要添加,而且是要加两个类名,第一个类名是固定的(可以在阿里图标库中修改,但不建议修改用默认的就好了),第二个类名就是你需要用到的图标名称

8.所有步骤都完成了,已经可以显示第三方图标了,只需要将图标当做字体来修改样式就行了,比如font-size和color


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部