Question

所以我正在使用Bootstrap在Wordpress网站上工作。我正在使用Bootstrap的导航栏作为与WP集成的菜单。我将我的主页作为导航栏中的链接作为“主页”。我想要一个字形而不是文字，而不是“Home”作为文本我想我可以使用CSS ......就像这样：

#menu-item-55 {
  /* something that removes text and adds the icon */
}

但是在bootstrap中我必须使用像这样的图标

<span class="glyphicon glyphicon-search"></span>

任何？

由于

Answer 1

我想我可以通过添加自定义链接并将导航标签放在内部来实现。

我仍然想要另一种方式来做到这一点。：d

干杯

Answer 2

如果您在主题中使用wordpress 3+ wp_nav_menu将此片段添加到functions.php，则会在您的导航中添加bootstrap的glyphicon-home链接。

function addHomeMenuLink($menuItems, $args)
{
    if('header_menu' == $args->theme_location) // make sure to give the right theme location for the menu
    {
        if ( is_front_page() )
            $class = 'class="current-menu-item active"';
        else
            $class = '';
        $homeMenuItem = '<li ' . $class . '>' .
                $args->before .
                '<a class="glyphicon glyphicon-home" href="' . home_url( '/' ) . '" title="Home">' .
                $args->link_before .
             /* 'HOME' . //add home text if you want. */
                $args->link_after .
                '</a>' .
                $args->after .
                '</li>';
        $menuItems = $homeMenuItem . $menuItems;
    }
    return $menuItems;
}
add_filter( 'wp_nav_menu_items', 'addHomeMenuLink', 10, 2 );

source

Answer 3

导航至外观＆gt;菜单
找到要添加图标的菜单项
展开菜单项
在导航项目中，您需要在现有菜单项标签之前或之后或之后添加图标代码。对于这个例子，我将使用主页图标。这是你要输入的内容：

＆LT; i class ='icon-home icon-white'＆gt;＆lt; / I＆GT;家

注意：请务必使用单引号！

5.Important：这是你想要做的事情，如果你忽略这一步，它可能会对你的SEO产生负面影响。您需要确保将纯文本放在“标题属性”字段中。

6.保存菜单。（还要确保从主题位置下拉列表中选择了一个菜单）就是这样！

http://jasonbradley.me/icons-in-the-wordpress-menu/

Wordpress菜单+ Bootstrap + Glyphicon取而代之的文本

3 个答案: