网站使用自定义SVG图标详细图文教程

在zibll主题后台的各项配置中，很多地方都可以设置图标，例如右侧悬浮按钮、移动端底部TAB按钮等等。主题内置了非常多的图标，直接选择即可使用。

同时zibll主题后台选择图标的配置，都是支持插入自定义SVG图标代码的，这样就相当于可以使用任何的漂亮图标了！

首先，说一下什么是SVG图标，简单的说就是一段代码，专门用于显示图标或图像。格式为<svg>...</svg>，不仅有单色图标，还支持多色图标，甚至还支持动画（例如我们官网的LOGO）
不要觉得很复杂，即使不懂代码也关系，只需几分钟，就能学会如何使用。

获取SVG图标代码

既然我们知道了，SVG图标其实就是代码，那不就简单了，只要我们能找到想要的图标代码不就能使用了吗？

没错，就是这么简单！在这里，首先我们一定要记住svg图标的格式：以<svg>开头，</svg>结尾！

网络上有非常多的svg图标库，百度一搜就有了。进入任意图标库，找到想要的图标，复制SVG代码！

iconfont阿里图库

iconfont阿里图库是老牌的图标库了，阿里巴巴旗下的，图标资源十分丰富，且免费。获取方式也十分简单。

首先进入iconfont阿里图库网站，注册并登录。然后，我们可以使用搜索，找到喜欢的图标。
点击图标下载按钮，在点击复制svg代码即可

iconpark字节图标库

iconpark是字节跳动旗下的图标库，内容也是十分丰富，图标还支持配置颜色、线条粗细、风格等..

进入iconpark图标库后，找到喜欢的图标，点击图标，点击复制SVG代码

通过浏览器源码复制

当然，有些网站可能没有点击复制的功能，那么我们可以通过浏览工具来复制svg代码。

假设我们在任意网站找到了一个喜欢的图标，我们把鼠标放在图标上，点击鼠标右键，选择检查（有些浏览器叫审查元素），在浏览器控制台中就能看到对应的是svg代码了，鼠标点击右键，复制HTML代码。

推荐使用chrome浏览器、火狐浏览器其他浏览器操作方式也差不多！

当然，这么办法不一定100%能获取到svg代码，这个要根据人家网站的html结构等其它情况可能会有出入

其它图标库推荐

我一般都是用的阿里图库，完全够用了，这里我在推荐几个比较知名的免费图标库。

mageicons.com remixicon.com lucide.dev qingicon.com boxicons.com heroicons.com circumicons.com

在主题配置中插入

SVG的图标代码我们已经获取到了，我们就可以在后台配置的任意的图标配置中插入SVG代码了
（此功能需升级zibll主题V8.3及以上版本）

在其他地方使用

同理，我们也可以在其他任意支持HTML代码的位置使用图标代码，例如：我们创建小工具模块时候，模块标题就是支持html代码的，我们就可以使用svg代码：

注意：复制的svg代码有时候可能会包含人家网站上的样式代码，这个可能会导致我们在使用的时候，效果不一致，这个就需要懂一点html代码，实在不行就换图标呗。

特别注意：使用代码必须要注意代码规范，例如最基本的标签闭合，不然可能会导致页面错位、变形！