如何在WordPress菜单中添加字体精美图标?

时间:2013-12-16 作者:Chirag Pipariya

如何在WordPress菜单中添加字体很棒的图标

3 个回复
最合适的回答,由SO网友:RiotAct 整理而成

我想您是想向仪表板添加自定义图标?随着wordpress到3.8的最新更新,仪表板图标发生了变化。它们现在实际上是一种字体。这实际上很酷,因为字体可以很容易地用css改变颜色,而且大小也很灵敏。

首先,我将告诉您如何使用MP6团队(最新仪表板的开发人员)创建的预构建仪表板图标添加自定义图标。前往http://melchoyce.github.io/dashicons/ 查看所有当前可用的DashIcon。如果要对当前菜单项进行更改,这是执行此操作的功能。将此添加到主题的功能中。php文件或自定义插件。这将更改“帖子”菜单的默认图标:

function custom_post_css() {
   echo "<style type=\'text/css\' media=\'screen\'>
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            content: \'\\\\f337\'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action(\'admin_head\', \'custom_post_css\');
如果要为自定义帖子类型添加图标,则大致相同,只需稍加调整:

function cptname_custom_css() {
   echo "<style type=\'text/css\' media=\'screen\'>
       #adminmenu .menu-icon-cptname div.wp-menu-image:before {
            content: \'\\\\f337\'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action(\'admin_head\', \'cptname_custom_css\');
在“cptname”中插入自定义帖子类型名称。现在是转折点。我们必须向自定义的post类型css添加一个类。为此,我们只需向自定义的post类型注册挂钩添加一行代码:

\'menu_icon\' => \'\',
所以我们的整个注册挂钩看起来是这样的:

$args = array(
 \'labels\' => $labels,
 \'menu_icon\' => \'\',
 \'public\' => true,
 \'publicly_queryable\' => true,
 \'show_ui\' => true, 
 \'show_in_menu\' => true, 
 \'query_var\' => true,
 \'rewrite\' => true,
 \'capability_type\' => \'post\',
 \'has_archive\' => true, 
 \'hierarchical\' => false,
 \'menu_position\' => null,
 \'supports\' => array(\'title\', \'editor\', \'thumbnail\')
); 
 register_post_type(\'cptname\',$args);
}
现在,如果你想使用字体很棒的图标,我们只需要将它们上传到我们的主题中。下载字体并将CSS和字体文件放在当前主题的相应文件夹中。然后,我们需要向主题函数添加更多代码。php文件或自定义插件:

function my_custom_fonts() {
<style>
 @font-face {
     font-family: FontAwesome;
     src: url(/path-to-font-folder/fontawesome-webfont.woff);
 }
</style>
}

add_action(\'admin-init\', \'my_custom_fonts\');
现在我们使用上面的代码有选择地选择新图标。这将再次使用FontAwesome图标集更改“帖子”菜单图标:

function custom_post_css() {
   echo "<style type=\'text/css\' media=\'screen\'>
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            font-family:  FontAwesome !important;
            content: \'\\\\fa-apple\'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action(\'admin_head\', \'custom_post_css\');
希望这对你有帮助。我还没有真正使用字体很棒的图标,但已经在自定义我的仪表板图标了。我很喜欢最新的仪表板大修,但有一个学习曲线。

刚刚做了一个编辑:我在这里尝试了一些东西,并在我自己的网站上使用了字体很棒的图标:

将此添加到您的函数中。php或插件:

function font_admin_init() {
   wp_enqueue_style(\'font-awesome\', \'http://netdna.bootstrapcdn.com/fontawesome/3.1.1/css/font-awesome.css\'); 
}

add_action(\'admin_init\', \'font_admin_init\');
然后添加此选项以选择实际图标:

function custom_post_css() {
   echo "<style type=\'text/css\' media=\'screen\'>
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            font-family:  FontAwesome !important;
            content: \'\\\\f0f2\'; // this is where you enter the fontaweseom font code
        }
     </style>";
}
add_action(\'admin_head\', \'custom_post_css\');
您可以在css文件中找到列出的代码。

SO网友:TomC

对于前端,我使用的是:

// Add font awesome CSS http://fortawesome.github.io/Font-Awesome/examples/
function awesome_css() {
    wp_enqueue_style("fontawesome", \'http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css\');
}
add_action( \'wp_enqueue_scripts\', \'awesome_css\' );
要添加管理,请查看以下内容:https://github.com/raket/fontawesome-for-wordpress/blob/master/fontawesome.php 似乎有一个可行的解决方案

SO网友:Chris

使用FontAwesome的逐步示例:包括颜色和自定义帖子类型http://fontawesome.io/icons/https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svgfa 前缀-在我的例子中,这是“flask.svg”functions.php, 在注册自定义帖子类型的位置,添加以下代码段:

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>\')
     ]);
}

Important notes:

<内容base64_encode 是从字体Awesomes github页面复制的原始字符串
  • 您需要更改svg字符串中的两个小内容:
    • 1:添加fill="black" 属性-这允许Wordpress更改颜色
    • 2:(可选)将宽度和高度更改为20,因为这是管理员的宽度/高度大小,看起来结果更清晰
  • enter image description here

    结束

    相关推荐