使用FontAwesome的逐步示例：

* 包括颜色和自定义帖子类型 *👍

1选择一个图标

• 后藤：http://fontawesome.io/icons/
• 选择一个图标，我在本例中选择了“fa-flask”。

2获取SVG

• 后藤：https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg
• 找到图标，它将是不带fa前缀的名称-在我的例子中，是“flak.svg”。
• 点击图标，然后点击Github中的“Raw

将SVG引入WordPress

• 在functions.php中，您可以在其中注册自定义post类型，添加以下代码段：

add_action('init', 'my_init');
function my_init() {
    register_post_type('labs', [
        'label' => 'Labs',
        // .. ect
        'menu_icon' => 'data:image/svg+xml;base64,' . base64_encode('<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M1591 1448q56 89 21.5 152.5t-140.5 63.5h-1152q-106 0-140.5-63.5t21.5-152.5l503-793v-399h-64q-26 0-45-19t-19-45 19-45 45-19h512q26 0 45 19t19 45-19 45-45 19h-64v399zm-779-725l-272 429h712l-272-429-20-31v-436h-128v436z"/></svg>')
     ]);
}

重要说明：

• base64_encode的内容是从Font Awesomes github页面复制的原始字符串。
• 您需要更改svg字符串中的两个小东西：
• 1：在path/s元素中添加一个fill="black"属性--这允许WordPress更改颜色。
• 2：（可选）将宽度和高度更改为20，因为这是管理员宽度/高度大小，似乎会产生更清晰的结果。

我通过分析Woocommerce得到了这个解决方案。如果没有为add_menu_page函数提供url，WordPress会使用默认的dashicon。所以这只是一个覆盖默认样式的问题。

#adminmenu #toplevel_page_yourpageid .menu-icon-generic div.wp-menu-image:before {
    font-family: your_font !important;
    content: '\eiconid';
    font-size: 1.3em!important;
}

我把SVG转换成Icomoon上的字体。

添加自定义SVG图标。

我想在我的wordpress插件我自己的自定义SVG图标，所以看看这个：https://developer.wordpress.org/reference/functions/add_menu_page/，这一切在纸面上看起来都很简单，指南告诉你如何准备$icon_url参数：
$icon_url（字符串）（可选）用于此菜单的图标的URL。
使用数据URI传递一个base64编码的SVG，它将被着色以匹配配色方案。它应该以"data：image/svg + xml"开头;64进制'。
然而，我对此有点纠结，想在使用$icon_url参数时添加一些注解。根据我的经验和在论坛上的观察，使用自定义图标并不像创建SVG并对其进行编码那么容易。下面是将自定义SVG图标添加到管理菜单的一步一步的过程：
1.首先，以任何您想要的方式获取或创建您的SVG图标。
1.接下来，清理SVG文件并正确格式化
1.然后对文件进行base64编码
1.在base64字符串前面加上'data：image/svg + xml;64进制，'
......这将为您提供一个有效的$icon_url字符串。让我详细介绍这些步骤。

步骤1

就我所知，你可以用任何你想要的方式创建你的SVG图形，我用Adobe Illustrator创建了我的，但是任何像Inkscape，Corel draw，甚至硬编码，如果你喜欢的话。

第二步

最痛苦的部分是清理你的SVG。然而我认为这也是最重要的部分之一。经过大量的测试和实验，我发现SVG越干净，它就越有可能工作。许多图形程序添加元数据和其他绒毛，使SVG更广泛的兼容性。这是伟大的99%的时间，但当使用它的wordpress菜单图标，它经常断开，导致根本不显示图标。
以下是通常从Adobe Illustrator导出的SVG示例：

<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 
15.7 16"><defs><style>.d{fill:#070707;}</style></defs><g id="a"/><g id="b"><g id="c"><path
 class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5
,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,
7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/><path class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,
3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.
4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/></g>
</g></svg>

凌乱，非常凌乱。即使我们加了一些换行符和缩进，也有很多东西在里面。

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.7 16">
    <defs>
        <style>
            .d{fill:#070707;}
        </style>
    </defs>
    <g id="a"/>
    <g id="b">
        <g id="c">
            <path class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/>
            <path class="d" d="M15.4,6.5H7.9v3h4.4c-.4,2.1-2.3,3.5-4.4,3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7,2-5,4.7-5.1,1.1,0,2.2,.4,3.1,1.2l2.3-2.2c-1.4-1.4-3.4-2.1-5.3-2.1C3.6,0,0,3.6,0,8s3.6,8,8,8,7.7-3.2,7.7-7.8c-.1-.6-.1-1.1-.3-1.7Z"/>
        </g>
    </g>
</svg>

所以我们要做的就是清理这些数据，去掉不必要的数据。你可能会发现，如果你把它添加为图像源，上面的代码会被加载，但是它在GUI上的颜色不正确，而且它的大小可能也不正确。所以我们需要做几件事：
1.删除〈？xml标记，这不会有帮助
1.然后你必须将每个样式硬编码到路径中，而不是使用标签。对于每个路径，从标签中找出哪些类适用于路径，并将这些类中的CSS添加到路径中。
1.完成后，可以完全删除defs元素。
1.您还可以删除<g> group元素，并将main path元素保留在SVG的根目录中。
1.为了确保SVG的颜色与GUI一致，需要在每个路径中添加fill ="black"。
1.然后，为了确保SVG具有正确的宽度和高度，在开始元素中添加width ="20" height ="20
完成后，上面的SVG文件现在看起来如下所示：

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    <path fill="black" d="M17.6 8.5h-7.5v3h4.4c-.4 2.1-2.3 3.5-4.4 3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7 2-5 4.7-5.1 1.1 0 2.2.4 3.1 1.2l2.3-2.2C14.1 2.7 12.1 2 10.2 2c-4.4 0-8 3.6-8 8s3.6 8 8 8c4.6 0 7.7-3.2 7.7-7.8-.1-.6-.1-1.1-.3-1.7z" fillrule="evenodd" cliprule="evenodd">
    </path>
</svg>

步骤3

现在你想用base64编码你的SVG，我的方法是把文件传递到PHP的默认编码机制，然后把路径作为绝对路径复制到我的PHP中，你不想让PHP读取SVG文件，用base64编码，然后在用户每次重新加载页面时把它传递到菜单。这只是浪费资源和时间。使用PHP很容易，如果你是一个WordPress开发人员，这应该不是一个问题。

// load the SVG data by loading the file or including the XML directly.
$svg = file_get_contents('/path/to/icon.svg');
// or
$svg = '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M17.6 8.5h-7.5v3h4.4c-.4 2.1-2.3 3.5-4.4 3.4-2.6-.1-4.6-2.1-4.7-4.7-.1-2.7 2-5 4.7-5.1 1.1 0 2.2.4 3.1 1.2l2.3-2.2C14.1 2.7 12.1 2 10.2 2c-4.4 0-8 3.6-8 8s3.6 8 8 8c4.6 0 7.7-3.2 7.7-7.8-.1-.6-.1-1.1-.3-1.7z" fillrule="evenodd" cliprule="evenodd"></path></svg>';
 
// then encode it and echo it out
echo  base64_encode($svg);
// will give you a long string that looks like this:
// PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdib3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjYTdhYWFkIiBkPSJNMTcuNiA4LjVoLTcuNXYzaDQuNGMtLjQgMi4xLTIuMyAzLjUtNC40IDMuNC0yLjYtLjEtNC42LTIuMS00LjctNC43LS4xLTIuNyAyLTUgNC43LTUuMSAxLjEgMCAyLjIuNCAzLjEgMS4ybDIuMy0yLjJDMTQuMSAyLjcgMTIuMSAyIDEwLjIgMmMtNC40IDAtOCAzLjYtOCA4czMuNiA4IDggOGM0LjYgMCA3LjctMy4yIDcuNy03LjgtLjEtLjYtLjEtMS4xLS4zLTEuN3oiIGZpbGxydWxlPSJldmVub2RkIiBjbGlwcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg==
 
// thats your base64 encoded SVG file!

第四步

添加'数据：图像/svg + xml;base64 "，放在base64 SVG前面，因此它看起来像这样：

"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdib3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjYTdhYWFkIiBkPSJNMTcuNiA4LjVoLTcuNXYzaDQuNGMtLjQgMi4xLTIuMyAzLjUtNC40IDMuNC0yLjYtLjEtNC42LTIuMS00LjctNC43LS4xLTIuNyAyLTUgNC43LTUuMSAxLjEgMCAyLjIuNCAzLjEgMS4ybDIuMy0yLjJDMTQuMSAyLjcgMTIuMSAyIDEwLjIgMmMtNC40IDAtOCAzLjYtOCA4czMuNiA4IDggOGM0LjYgMCA3LjctMy4yIDcuNy03LjgtLjEtLjYtLjEtMS4xLS4zLTEuN3oiIGZpbGxydWxlPSJldmVub2RkIiBjbGlwcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg=="

先生，这里有一个完全有效的$icon_url字符串。我会把这个字符串硬编码到一个变量中，每次都把它添加到你的插件中。

add_menu_page( 'Plugin page name', 'Plugin', 'manage_options', "slug", 'callback','data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdib3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjYTdhYWFkIiBkPSJNMTcuNiA4LjVoLTcuNXYzaDQuNGMtLjQgMi4xLTIuMyAzLjUtNC40IDMuNC0yLjYtLjEtNC42LTIuMS00LjctNC43LS4xLTIuNyAyLTUgNC43LTUuMSAxLjEgMCAyLjIuNCAzLjEgMS4ybDIuMy0yLjJDMTQuMSAyLjcgMTIuMSAyIDEwLjIgMmMtNC40IDAtOCAzLjYtOCA4czMuNiA4IDggOGM0LjYgMCA3LjctMy4yIDcuNy03LjgtLjEtLjYtLjEtMS4xLS4zLTEuN3oiIGZpbGxydWxlPSJldmVub2RkIiBjbGlwcnVsZT0iZXZlbm9kZCI+PC9wYXRoPjwvc3ZnPg==', );

我希望这对其他人有帮助，因为那会为我今天早上节省几个小时!

把icondata转换成base 64后，正确的表达方式是这样的;

“，”很重要

'data:image/svg+xml;base64,'.$icon_data_in_base64

我想我应该补充以下内容：
要让SVG自动重新着色以匹配主题，它需要设置一个fill属性，这是因为它是通过脚本动态改变的，否则它将不知道要重新着色的部分。

svg文件中必须设置了fill属性才能工作。在Atom之类的编辑器中打开svg文件，并确保它如下所示：
<path fill="black" d="....
你可以把任何一种你想要的颜色在那里，WordPress使用JS自动更新填充值的基础上管理主题。

CSS或SVG导入的第三种替代方法是将SVG图像转换为Base64并使用$icon_data_uri = 'data:image/svg+xml;base64,' . $icon_base64;

免责声明：我没有做这个解决方案，但是我想分享它。完全的功劳应该归于编辑人员@https://daext.com/。他们做了一个可爱的指南来生成一个svg并将其应用到WordPress管理菜单中。Source
要将SVG转换为Base64，请访问：base64并将转换后的值复制粘贴到$icon_base64中。
为确保一致性，如果链接中断，要点如下：

**步骤1）**创建名为“my_custom_plugin”的新文件夹，并将其放置在：“/wp-content/插件/{我的自定义插件}”
步骤2）在“my_custom_plugin”文件夹中创建一个".php”文件，并将其命名为“my-plugin.php”
**第3步）**将以下代码复制粘贴到文件中：

<?php 
/*
 * Plugin Name: Custom-Plugin
 * Plugin URI: 
 * Description: Test Page. 
 * Version: 0.0.1
 * Author:
 * Author URI: 
 */

add_action('admin_menu', 'function_create_menu');
// Create WordPress admin menu
function function_create_menu(){

//The icon in Base64 format
$icon_base64 = 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyMTM0IDIxMzQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxLjU7Ij48Zz48cmVjdCB4PSIyODIuNTc2IiB5PSI4OTAuODg2IiB3aWR0aD0iNzc1Ljc1OCIgaGVpZ2h0PSI3NzguNzgxIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtb3BhY2l0eTowO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDo2Ni42N3B4OyIvPjxyZWN0IHg9IjEwNzMuODkiIHk9Ijg5MC44ODYiIHdpZHRoPSI3NzUuNzU4IiBoZWlnaHQ9Ijc3OC43ODEiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1vcGFjaXR5OjA7c3Ryb2tlOiMwMDFkZmY7c3Ryb2tlLXdpZHRoOjY2LjY3cHg7Ii8+PHJlY3QgeD0iNjc4LjIzMiIgeT0iMTA2LjUzNyIgd2lkdGg9Ijc3NS43NTgiIGhlaWdodD0iNzc4Ljc4MSIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLW9wYWNpdHk6MDtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6NjYuNjdweDsiLz48cGF0aCBkPSJNMTE3My43MywzMy4zNjZsLTIxNS4yOTEsLTBsLTAsMzY3LjI0MWwxMDcuMTMxLC0xMTkuMTA2bDEwOC4xNiwxMTkuMTA2bC0wLC0zNjcuMjQxWiIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLW9wYWNpdHk6MDtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6NjYuNjdweDsiLz48cGF0aCBkPSJNNzgxLjg0OCw4OTQuMDc1bC0yMTUuMjkxLDBsLTAsMzUzLjc3MWwxMDcuMTMxLC0xMTQuNzM3bDEwOC4xNiwxMTQuNzM3bC0wLC0zNTMuNzcxWiIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLW9wYWNpdHk6MDtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6NjYuNjdweDsiLz48cGF0aCBkPSJNMTU2NC45OCw4OTUuNDc0bC0yMTUuMjkxLC0wbC0wLDM1My43NzFsMTA3LjEzLC0xMTQuNzM3bDEwOC4xNjEsMTE0LjczN2wtMCwtMzUzLjc3MVoiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1vcGFjaXR5OjA7c3Ryb2tlOiMwMDFkZmY7c3Ryb2tlLXdpZHRoOjY2LjY3cHg7Ii8+PHJlY3QgeD0iOTk2LjMwMiIgeT0iNTAxLjQ5NyIgd2lkdGg9IjEzOS41NjEiIGhlaWdodD0iNjQuMjMxIiBzdHlsZT0iZmlsbDojMDAxZGZmO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDoxMS42M3B4OyIvPjxyZWN0IHg9IjYwNC40MjIiIHk9IjEzNTUuODkiIHdpZHRoPSIxMzkuNTYxIiBoZWlnaHQ9IjY0LjIzMSIgc3R5bGU9ImZpbGw6IzAwMWRmZjtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6MTEuNjNweDsiLz48cmVjdCB4PSIxMzg3LjU1IiB5PSIxMzU1Ljg5IiB3aWR0aD0iMTM5LjU2MSIgaGVpZ2h0PSI2NC4yMzEiIHN0eWxlPSJmaWxsOiMwMDFkZmY7c3Ryb2tlOiMwMDFkZmY7c3Ryb2tlLXdpZHRoOjExLjYzcHg7Ii8+PHJlY3QgeD0iMTQxLjAzOCIgeT0iMTY3MS4yOCIgd2lkdGg9IjE4NDcuMDMiIGhlaWdodD0iMTQyLjg0IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDo2Ni42N3B4OyIvPjxyZWN0IHg9IjE0MC4wMDMiIHk9IjE5NTUuNDMiIHdpZHRoPSIxODQ5LjEiIGhlaWdodD0iMTQyLjg0IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDo2Ni42N3B4OyIvPjxyZWN0IHg9IjIxMy4yMzYiIHk9IjE4MTMuNyIgd2lkdGg9IjE0Mi40MTIiIGhlaWdodD0iMTQxLjQ3OSIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMWRmZjtzdHJva2Utd2lkdGg6NjYuNjdweDsiLz48cmVjdCB4PSI5OTUuOTIxIiB5PSIxODEzLjciIHdpZHRoPSIxNDIuNDEyIiBoZWlnaHQ9IjE0MS40NzkiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwMDFkZmY7c3Ryb2tlLXdpZHRoOjY2LjY3cHg7Ii8+PHJlY3QgeD0iMTc3OC42MSIgeT0iMTgxMy43IiB3aWR0aD0iMTQyLjQxMiIgaGVpZ2h0PSIxNDEuNDc5IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAxZGZmO3N0cm9rZS13aWR0aDo2Ni42N3B4OyIvPjwvZz48L3N2Zz4=';

//The icon in the data URI scheme
$icon_data_uri = 'data:image/svg+xml;base64,' . $icon_base64;

$page_title = 'Hello World';
$menu_title = 'My Admin Menu';
$icon_data_uri;
$position   = '20';
$capability = 'manage_options';
$menu_slug  = 'newPage';
$function   = 'test_page';

add_menu_page(
    $page_title,
    $menu_title,
    $capability,
    $menu_slug,
    $function,
    $icon_data_uri,
    $position
);

}

// Create WordPress plugin page
function test_page()
{
?>
<h1>WordPress test site</h1>

<?php
}

?>

步骤4）转到WordPress的 Jmeter 板，并“激活”插件：“插件”-〉“已安装插件”。查找插件名称：“Custom-Plugin"。在“my-plugin.php”中的插件文件顶部指定
这应该给予你知道如何开始使用插件。但是，请记住，有些功能应该只启动一次，以确保良好的用户体验。Plugin Handbook

您必须将Base64编码的图像（数据URI）粘贴到src ...
更多的on Wikipedia。