需求
页面中会用到很多的图标,一个个找很麻烦,我们直接使用 阿里的图标库,iconfont
https://www.iconfont.cn/
进去之后,自己注册个账号,然后直接在搜索框搜索自己想要的图标:
选好之后点击图标,添加到购物车
往下拉,项目右侧有一个购物车
自己创建一个项目,选中,点确定
就添加到自己的项目中了。
到自己的项目里查看
这里选择你自己刚刚创建的项目,选择font class,会给你生成一个样式连接,里面就是css文件。
复制这个链接,回到编辑器
打开public/index.html的head标签,当成css样式引入即可
<!--iconfont-->
<link rel="stylesheet" href="//at.alicdn.com/t/font_2858778_owyztzgv1c.css">
到这里就引入完成
使用
iconfont的样式如何使用?
直接写一个标签,加上class样式,类名有两个,第一个是固定的 iconfont
第二个类名,从你的项目中,选中图标,点击复制代码
就能得到,一般是这个格式 iconfont-xxxx
示例如下:
<span class="iconfont icon-more"></span>
到页面中查看即可看到效果