vue项目使用iconfont图标之fontc-class的使用

最近用到阿里巴巴矢量图标,在此分享下小经验

1将你所需要的图标先都加入购物车,然后在购物车那里添加到你的项目中去,最后下载到本地

vue项目使用iconfont图标之fontc-class的使用_第1张图片

不要一个一个下载代码,因为到时候这些都要持续集成到你的真实项目中,其文件名都是一样的。最后确定后在

资源管理-》我的项目-》下载到本地

vue项目使用iconfont图标之fontc-class的使用_第2张图片

 

下载后的文件如下,我采用的是font-class,我实际需要的文件是这些

vue项目使用iconfont图标之fontc-class的使用_第3张图片

2 引用到项目中,使用class类名即可

1)需在vue中引入iconfont.css文件,我写在main.js中import引入可以

import 'src/assets/icons/iconfont.css'

2)如果iconfont.eot、svg、ttf、woff在同一级,则iconfont.css的引入路径不用改,不在同一目录则要改动其相对路径

vue项目使用iconfont图标之fontc-class的使用_第4张图片

3)最后在vue文件需要图标的位置处添加即可

  • 要使用哪个样式,就把哪个样式的名字复制下来,把上面的icon-xxx替换,这里的icon-xx是在iconfont官网-我的项目中可以找到

    vue项目使用iconfont图标之fontc-class的使用_第5张图片

    这个项目中的内容不要删掉,每次增加都要全部下载下来替换,记得加入团队项目中,不然以后维护项目就坑了别人。

    目前能想到的粗略方法是这样,应该会有其他更便捷的方法 

     

    你可能感兴趣的:(前端,iconfont,ontc-class)