常见字体图标库
- Font Awsome:https://fontawesome.com (国外)
- iconfont:https://www.iconfont.cn(国内)
选择并添加图标
今天我们要使用的是iconfont,也就是阿里巴巴矢量图标库。
进入该网站后搜索想要的图标,点击购物车
![](https://pic.rmb.bdstatic.com/bjh/71ce5d52e8af8ae6c8866cb26390c66e.png)
添加后再点击右侧的购物车图标,选择添加至项目。
![](https://pic.rmb.bdstatic.com/bjh/df584a3cdc6b41becc7622c73ad9c777.png)
如果没有项目就选择创建,项目名称随便取
![](https://pic.rmb.bdstatic.com/bjh/021351115a8f8ac241e136c824336c74.png)
使用字体图标
有两种方式,这里我们演示本地文件方法
网络文件
点击更新代码,然后复制js外链到主题中,有能力的自行操作,这里不做演示
本地文件
进入我的项目,选择下载至本地
![](https://pic.rmb.bdstatic.com/bjh/c2f3aeddebfd273379b320a90aa5de40.png)
将下载的所有文件解压放在主题目录/user/iconfont
下,直接覆盖即可。
然后回到我的项目选择预览字体,黑白选择Font class,彩色选择Symbol,本主题就是Symbol。
![](https://pic.rmb.bdstatic.com/bjh/82a55b16421d8730256878b7292e8207.png)
![](https://pic.rmb.bdstatic.com/bjh/f5a306ce1229201abfaab1911c3abb4d.png)
可以看到需要引入相应的文件,不过主题已经写好了引入代码,无需再引用
直接进行第三步,挑选图标!
将这段代码复制到菜单设置的导航标签里
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
![](https://pic.rmb.bdstatic.com/bjh/35ddae95b876fea3cb4c7310b32d8041.png)
将#icon-xxx
替换成你想要的图标类名,然后菜单名称放在</svg>
后面即可
![](https://pic.rmb.bdstatic.com/bjh/dcdaab6f80def0daf6f937bef62b8941.png)
![](https://pic.rmb.bdstatic.com/bjh/7afc27c659084bdcfea764870f2ce356.png)
参与讨论
(Participate in the discussion)
参与讨论
发现6条评论
织音
2022年07月21日 10:49获取中...
iconfont现在在升级,加不了新的了,害
猫猫
博主2022年07月21日 15:12获取中...
@织音那就用Font Awesome
水原希子
2022年07月28日 02:50获取中...
@猫猫iconfont只是不能用在线的了,但还是可以下载使用
织音
2022年07月22日 09:25获取中...
@猫猫b( ̄▽ ̄)d
jianghanyu
2022年07月03日 10:58获取中...
jj
猫猫
博主2022年07月13日 00:25获取中...
@jianghanyu(❁´◡`❁)