如何將房屋圖標添加到菜單中？

我想修改我的菜單，使它在開始時會有一個小房子圖標，當用戶點擊那個房子圖標時，他將被重定向到主頁。問題是我不知道是什麼改變或者...... 我在HTML + CSS如何將房屋圖標添加到菜單中？

<li class="home"><a href="#"><div class="home-image"></div></a></li>

感謝代碼。

來源

2014-02-11 user3271204

謝謝大家對你的答案，但我應該在哪裏插入這個代碼？我想我忽略了一個基本的細節：我想在prestashop的「頂層菜單」模塊中進行更改。 – user3271204

試試這個

<li class="home"><a href="#"><div class="home-image"><span class="icon-home"></span></div></a></li>

來源

2014-02-11 12:48:35 Iqbal

如果你不知道什麼的CSS然後就將此代碼粘貼

<li class="home"><a href="http://google.com/"><div class="home-image"> 
    <img width="50" height="50" style="margin-top:3px" src="http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/256/blue-home-icon.png"> 
</div></a></li>

jsfiddle demo

來源

2014-02-11 12:55:56 Dexture

您可以使用字體真棒/引導/谷歌。

字體真棒：

粘貼頭部分下面的代碼[<head>paste it here</head>]

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

並添加此

<li class="home"><a href="#"><div class="home-image"><i class="fa fa-home"></i></div></a></li>

引導圖標：

粘貼在頭段[<head>paste it here</head>]

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

下面的代碼並添加此

<li class="home"><a href="#"><div class="home-image"><i class="glyphicon glyphicon-home"></i></div></a></li>

谷歌圖標：

粘貼在頭段[<head>paste it here</head>]

下面的代碼

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

並加這個

<li class="home"><a href="#"><div class="home-image"><i class="material-icons">home</i></div></a></li>

您需要添加樣式來更改圖標的大小。

例子：

<i class="fa fa-home" style="font-size:24px;"></i> 
<i class="glyphicon glyphicon-home" style="font-size:24px;"></i> 
<i class="material-icons" style="font-size:24px;">home</i>

來源

2016-08-09 15:13:07

如何將房屋圖標添加到菜單中？

回答

相關問題