fastadmin添加图标库

image.png

咱们在使用fastadmin的时候，系统提供了fa的图标七百多个，但是这时候我们自己想添加新的图标库怎么办呢，话不多说看步骤！

将下载下来的图标库存放至静态文件目录，我这里存放目录public/assets/libs

image.png

这个目录没有强制要求，喜欢放哪就放哪

将图标库的css引用进来(我这边前台后台都得用，那么我就直接两遍都加上)

image.png image.png

这边路径一定要确保正确,如果文件路径错误将导致后面图标无法正常显示

现在引用后就可以正常使用了，比如mdi的图标 代码就是

<i class="mdi mdi-ab-testing"></i>

但是现在我还有个需求，那就是后台规则页面需要显示列表出来提供选择，但是系统默认只显示fa的图标，那怎么办呢，那咱们就只能找找图标数据所处目录，改内部代码了，经过查找找到图标数据目录，那么我们直接把我们自己的图标数据加进来

image.png
image.png
image.png

但是现在我们发现我们的数据跟他的数据格式不一样，所以我们首先可以先把数据改成一样的就行了，例：

image.png
这样就行了，但是我们怎么快速改成这样的数据呢，这边给大家推荐个方法，直接撸个正则匹配出来再把数据拼接输出出来就行了，我这边就直接正则后批量拼接复制出来了（懒得写程序哈哈哈哈）
那么数据有了，我们怎么把数据添加到列表呢，接下来我们就去后台对应的页面js里面看看！ image.png

经过寻找找到这个位置是用来显示列表数据的，但是他默认匹配的都是fa图标，咱们新加的进不去，那咱们就只能自己diy一下了，或者勤快的去把自己添加的图标数据和css文件里面名字都改成fa也行，不过要小心冲突哦！我这边就自己diy一下代码好了

image.png

再加上一段匹配就好了，那么为什么我们要在匹配的加上前缀呢，因为咱么的显示列表的模板文件中会自动加上fa的前缀，那么我们mdi的图标还是不能用，所以干脆就直接加上前缀好了

image.png

既然我们都加上了前缀，那么咱们下面监听列表点击的位置是需要把前缀删了的，否则也是有问题的哦，那么现在最后一步，将模板html的输出前缀删掉就好了！这个模板文件呢就看页面的html文件的最下面，按照路径找就好了

image.png
image.png
那么我们看见这边是有前缀的，那么就把前缀删掉就好了！
最后看下效果：
image.png

那么这样我们前台后台都可以使用自定义的图标库了，以及后台的选择图标列表也加进去了，后续再想加图标库那么就同样写入图标数据再加个匹配就好了！！！