How to add a house icon to the menu?
Question
I want to modify my menu so that it there will be a little house icon at the beginning and when the user clicks that house icon he will be redirected to the homepage. The problem is I don't know what to change or where... I have the code in html+css
<li class="home"><a href="#"><div class="home-image"></div></a></li>
Thanks.
3 answers
solution1
1 2014-02-11 12:48:35
尝试这个
<li class="home"><a href="#"><div class="home-image"><span class="icon-home"></span></div></a></li>
solution2
1 2016-08-09 15:13:07
You can use Font Awesome/Bootstrap/Google.
Font Awesome:
Paste the below code in Head section [ <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">
and add this
<li class="home"><a href="#"><div class="home-image"><i class="fa fa-home"></i></div></a></li>
Bootstrap Icons:
Paste the below code in Head section [ <head>paste it here</head> ]
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
and add this
<li class="home"><a href="#"><div class="home-image"><i class="glyphicon glyphicon-home"></i></div></a></li>
Google Icons:
Paste the below code in Head section [ <head>paste it here</head> ]
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
and add this
<li class="home"><a href="#"><div class="home-image"><i class="material-icons">home</i></div></a></li>
You need to add style to change the size of the icon.
Examples:
<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>
solution3
0 2014-02-11 12:55:56
If you dont know anything about css then just paste this code
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.