2013-10-17 24 views
0

所以我正在使用Bootstrap在Wordpress網站上工作。 我使用Bootstrap的導航欄與WP集成的菜單。 我有我的主頁作爲「家」的導航欄中的鏈接。 而不是「主頁」作爲文本我想要一個圖形出現,而不是文本。
我想我可以使用CSS是......是這樣的:WordPress的菜單+引導+字形而不是文字

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

但在引導我必須使用的圖標這樣

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

有人嗎?

感謝

回答

0

我想,我可以添加自定義鏈接,並把導航標籤內做到這一點。

我仍然想要另一種方式來做到這一點。 :d

乾杯

-1
  1. 導航到外觀>菜單
  2. 找到您想要的圖標添加到
  3. 展開菜單項
  4. 裏面的導航項目,你將菜單項想要在你現有的菜單項標籤之前或之後添加你的圖標代碼。在這個例子中,我將使用主圖標。這裏是你鍵入的內容:

    < I類= '圖標,主頁圖標白'> </I>首頁

注:請務必使用單引號!

5.重要事項:這是你想要做的事情,如果你忽略這一步,它可能會對你的SEO產生負面影響。您需要確保將純文本放在標題屬性字段中。

6.保存菜單。 (還要確保你已經從主題位置下拉列表中選擇了一個菜單)就是這樣!

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

+0

菜單項*真的*不應該有HTML在其中。如果原始海報刪除Bootstrap/Glyphicons會發生什麼?他堅持在菜單中的HTML。 –

+0

如果刪除Bootstrap/Glyphicons沒有任何反應,標籤爲空,瀏覽器上將不會顯示任何內容。 – Ulugov

+0

但你仍然留下垃圾標記。 –

0

如果您使用的是有你的主題加入這個片段到functions.php將增加引導的glyphicon家庭鏈接到您的導航WordPress的3+ wp_nav_menu。

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