常见字体图标库

选择并添加图标

今天我们要使用的是iconfont,也就是阿里巴巴矢量图标库。

文章目录

进入该网站后搜索想要的图标,点击购物车

添加后再点击右侧的购物车图标,选择添加至项目。

如果没有项目就选择创建,项目名称随便取

使用字体图标

有两种方式,这里我们演示本地文件方法

网络文件

点击更新代码,然后复制js外链到主题中,有能力的自行操作,这里不做演示

本地文件

进入我的项目,选择下载至本地

将下载的所有文件解压放在主题目录/user/iconfont下,直接覆盖即可。

然后回到我的项目选择预览字体,黑白选择Font class,彩色选择Symbol,本主题就是Symbol。

可以看到需要引入相应的文件,不过主题已经写好了引入代码,无需再引用

直接进行第三步,挑选图标!

将这段代码复制到菜单设置的导航标签里

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

#icon-xxx替换成你想要的图标类名,然后菜单名称放在</svg>后面即可

© 版权声明
分享是一种美德,转载请保留原链接