iconfont图标_记iconfont字体图标的使用方法(Font calss)--超简单!

iconfont 是国内阿里推出的一款字体库,非常的强大而且十分好用,iconfont 提供了三种使用方法,下面我们来用最简单的方法为我们的项目添加图标,

step 1:打开iconfont(阿里巴巴矢量图标库)官网,然后注册登录,或者用github(世界上最大的同性网站,你值得拥有)登录也行.

step 2:找到图标管理->我的项目->然后新建项目(方便后期添加和管理图标):

step 3:项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车;

然后将选中的图标加入到购物车中,

添加后会在购物车中显示已选择的数量,然后点击购物车将选好的图标添加到项目中

最后你会在项目中看到,添加成功的图标,

然后将所有选中的图标下载到本地,

step 4:在项目中src 下的assets建一个文件夹,将解压出来的文件放置新建的文件夹中,在main.js 中引入, import '@/assets/icon/iconfont.css'

step 5:到了最后一步了,如何在项目中使用字体图标呢,其实很简单,创建一个i标签或者span标签,添加两个类名,一个固定的是iconfont,另一个是你想要的那个图标对应的类名:

例如 <i class='iconfont icon-HOMEMESSAGE'></i>