Question

我想修改我的菜单，以便在开头有一个小房子图标，当用户点击该房子图标时，他将被重定向到主页。问题是我不知道要改变什么或在哪里...... 我有html + css中的代码

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

感谢。

Answer 1

试试这个

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

Answer 2

您可以使用Font Awesome / Bootstrap / Google。

Font Awesome：

将以下代码粘贴到头部[<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>

Google图标：

将以下代码粘贴到头部[<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>

Answer 3

如果您对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

如何在菜单中添加房子图标？

3 个答案: