WordPress设置页面如何加载svg图标

比方说你要添加设置管理页面的时候如何设置添加svg图标,

首先要下载svg图标。目前所知只有这个免费网站。 https://iconmonstr.com/。

然后在需要添加svg图标的输入里,添加 data:image/svg+xml;base64,;

然后通过编辑器把svg打开,然后选择svg里面所有内容,然后打开chrome的审查,然后在下面输入btoa() 然后用斜引号, 也就是backtips, 输入svg里面的内容,得到一串字符串。比如下面的:

PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0wIDIzdi0xMC42NjhjMC0uOTkuMDgyLTEuOTUyIDEuMzI0LTIuMjIzIDEuNDMzLS4zMTIgMi43NjgtLjU4NiAyLjEyMS0xLjczNi0xLjk2Ni0zLjUwMS0uNTIxLTUuMzczIDEuNTU1LTUuMzczIDIuMTE3IDAgMy41MjcgMS45NDQgMS41NTYgNS4zNzMtLjMxMS41NDEtLjE3NS44ODguMjAxIDEuMTM2LjIyNS0uMjA4LjUyOC0uMzY3LjkzNC0uNDYxIDEuNjg0LS4zODkgMy4zNDQtLjczNiAyLjU0NS0yLjIwOS0yLjM2Ni00LjM2NC0uNjc0LTYuODM5IDEuODY2LTYuODM5IDIuNDkxIDAgNC4yMjYgMi4zODMgMS44NjYgNi44MzktLjc3NSAxLjQ2NC44MjYgMS44MTIgMi41NDUgMi4yMDkuMzUyLjA4MS42MjcuMjEyLjg0LjM4LjI5LS4yNDIuMzY5LS41NzEuMDkxLTEuMDU1LTEuOTcxLTMuNDI5LS41NjEtNS4zNzMgMS41NTYtNS4zNzMgMi4wNzYgMCAzLjUyMSAxLjg3MiAxLjU1NSA1LjM3My0uNjQ3IDEuMTUuNjg4IDEuNDI0IDIuMTIxIDEuNzM2IDEuMjQyLjI3MSAxLjMyNCAxLjIzMyAxLjMyNCAyLjIyM3YxMC42NjhjMCAuNTUyLS40NDggMS0xIDFoLTIyYy0uNTUyIDAtMS0uNDQ4LTEtMXptMjMtOGgtMjJ2OGgyMnYtOHptLTE4LjE5MyAxbC0uOTc2IDIuMDE0LTIuMjE3LjMwNSAxLjYxNSAxLjU1Mi0uMzk1IDIuMjA0IDEuOTczLTEuMDU3IDEuOTczIDEuMDU2LS4zOTMtMi4yMDMgMS42MTMtMS41NTItMi4yMTctLjMwNS0uOTc2LTIuMDE0em03LjE5MyAwbC0uOTc2IDIuMDE0LTIuMjE3LjMwNSAxLjYxNSAxLjU1Mi0uMzk1IDIuMjA0IDEuOTczLTEuMDU3IDEuOTczIDEuMDU2LS4zOTMtMi4yMDMgMS42MTMtMS41NTItMi4yMTctLjMwNS0uOTc2LTIuMDE0em03LjE5MyAwbC0uOTc2IDIuMDE0LTIuMjE3LjMwNSAxLjYxNSAxLjU1Mi0uMzk1IDIuMjA0IDEuOTczLTEuMDU3IDEuOTczIDEuMDU2LS4zOTMtMi4yMDMgMS42MTMtMS41NTItMi4yMTctLjMwNS0uOTc2LTIuMDE0em0tMTQuODg2IDMuNTJsLS41MTItLjQ5MS43MDItLjA5Ny4zMS0uNjM5LjMxLjYzOS43MDMuMDk3LS41MTEuNDkxLjEyNS42OTktLjYyNy0uMzM1LS42MjUuMzM0LjEyNS0uNjk4em03LjE5MyAwbC0uNTEyLS40OTEuNzAyLS4wOTcuMzEtLjYzOS4zMS42MzkuNzAzLjA5Ny0uNTExLjQ5MS4xMjUuNjk5LS42MjctLjMzNS0uNjI1LjMzNC4xMjUtLjY5OHptNy4xOTMgMGwtLjUxMi0uNDkxLjcwMi0uMDk3LjMxLS42MzkuMzEuNjM5LjcwMy4wOTctLjUxMS40OTEuMTI1LjY5OS0uNjI3LS4zMzUtLjYyNS4zMzQuMTI1LS42OTh6bS0xMi41ODktNS41MmwtLjAwMS0yLjEyNmMwLS41MjYuMDE4LTEuMDQ2LjE0Ny0xLjQ5OC0uMzE5LS4xOTktLjU3My0uNDU4LS43MjktLjgxMS0uMTYtLjM2LS4yNjEtLjk0NS4xNjgtMS42OS43OTItMS4zNzkgMS4wMTktMi41NjQuNjIyLTMuMjUxLS40ODctLjg0LTIuMTMtLjgzMS0yLjYwOC0uMDE0LS4zOTcuNjc5LS4xNzQgMS44NzEuNjE0IDMuMjczLjQxOS43NDcuMzE2IDEuMzMuMTU2IDEuNjg4LS4yMjkuNTA5LS41MzUuOTg3LTIuOTM2IDEuNTE2LS4zNjkuMDgtLjUzNy4xMTYtLjUzNyAxLjI0NWwuMDAxIDEuNjY4aDUuMTAzem0xMC45OTggMHYtMi4xMjJjMC0xLjQzOC0uMTkzLTEuNzEzLS44MTMtMS44NTYtMi43NDYtLjYzMy0zLjA5OC0xLjE3Mi0zLjM1OS0xLjc0NC0uMTgxLS4zOTUtLjMwMS0xLjA0OC4xNTQtMS45MDcgMS4wMjItMS45MjkgMS4yNzgtMy41ODIuNzAzLTQuNTM4LS42NzItMS4xMTUtMi43MDQtMS4xMjUtMy4zODQuMDE3LS41NzcuOTY5LS4zMTggMi42MTMuNzEyIDQuNTEyLjQ2NS44NTcuMzQ4IDEuNTEuMTY5IDEuOTA5LS40OTEgMS4wODgtMS44MzggMS4zOTktMy4yNjUgMS43MjctLjgyOS4xOTYtLjkxNi41ODctLjkxNiAxLjg3NmwuMDAxIDIuMTI2aDkuOTk4em01Ljg5NyAwbC4wMDEtMS42NjhjMC0xLjEyOS0uMTY4LTEuMTY1LS41MzctMS4yNDUtMi40MDEtLjUyOS0yLjcwNy0xLjAwNy0yLjkzNi0xLjUxNi0uMTYtLjM1OC0uMjYzLS45NDEuMTU2LTEuNjg4Ljc4OC0xLjQwMiAxLjAxMS0yLjU5NC42MTQtMy4yNzMtLjQ3OC0uODE3LTIuMTIxLS44MjYtMi42MDguMDE0LS4zOTcuNjg3LS4xNyAxLjg3Mi42MjIgMy4yNTEuNDI5Ljc0NS4zMjggMS4zMy4xNjggMS42OS0uMTI3LjI4OC0uMzIuNTEzLS41NTkuNjk1LjE2Mi40NzguMTgyIDEuMDQ0LjE4MiAxLjYxOHYyLjEyMmg0Ljg5N3oiLz48L3N2Zz4=

然后在base64逗号后面粘贴上去。 然后保存。 svg图标就成功加载。

上面是直接添加svg内容的方式,如何直接加载文件的方式加载svg?

如果是插件的话 plugin_dir_url( FILE ) 指向插件文件夹, plugin_dir_url( FILE ) . ‘custom.svg’ 这样子导入文件就可以。

如何给svg添加自定义颜色和样式?

Share :