CSS menu with custom image or icon on every button

Question

I have created Html menu as follow

<a href="./football.html">Football</a>
<a href="./basketball-.html">Basketball</a>
<a href="./baseball.html">Baseball</a>

then my css file is as follow:

#main-nav a
{     
   display: block;
   float: left;
   margin: 125px 0px 0px 0px;
   color: #666666;
   border: 1px #C0C0C0 solid;
   background-color: #EEEEEE;
   font-family: Arial;
   font-size: 13px;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   width: 106px;
   height: 78px;
   vertical-align: middle;
   line-height: 78px;
   text-align: center;
}
#main-nav a:hover, #main-nav .active
{
   color: #666666;
   background-color: #C0C0C0;
   border: 1px #C0C0C0 solid;
}

I am trying to customize it a bit more by adding 30*30 icon of football etc in each corresponding button

i have tried to make every image as a Div and use position to make it in the corresponding button but this solution is fragile and not the best option.

can idea of better solution?

@Sowmya no inside the box just below the text in the button eg: football then football icon below it all inside the botton — Mostafa Biomy, May 24 '13 at 11:11

score 1 · Answer 1 · edited May 23 '17 at 12:11

You can try this code:

    <div id='main-nav'> <a href="./football.html">Football<div class='icon'></div></a>

<a href="./basketball-.html">Basketball<div class='icon'></div></a>

<a href="./baseball.html">Baseball<div class='icon'></div></a> 
</div>

whit this css:

#main-nav a {
    display: block;
    float: left;
    margin: 125px 0px 0px 0px;
    color: #666666;
    border: 1px #C0C0C0 solid;
    background-color: #EEEEEE;
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    width: 106px;
    height: 78px;
    vertical-align: middle;
    line-height: 78px;
    text-align: center;
    position : relative;
}
#main-nav a .icon {
    height: 30px;
    width : 30px;
    background : red;//change this for the img.
    position : absolute;
    top : 0;
    left  : 35px;
}
#main-nav a:hover, #main-nav .active {
    color: #666666;
    background-color: #C0C0C0;
    border: 1px #C0C0C0 solid;
}

Changing the red background for a background: url(/path/to/image)

Please, take a look at this jsfiddle.

Note: include a <div> intro a <a> it's valid in html5 but not in html 4.01. More info here.

tried it but the red color goes below the button not inside it why? — Mostafa Biomy, May 24 '13 at 11:24
Sorry, I don't understand you... The '#main-nav a' must have position:relative and the '#main-nav a .icon' position:absolute. If you still have problems, could you post a fiddle? — mario595, May 24 '13 at 11:31

Sowmya · Accepted Answer · 2013-05-24T11:30:05.553

0

Try this

    #main-nav a
    {     
       display: block;
       float: left;
       margin: 125px 0px 0px 0px;
       color: #666666;
       border: 1px #C0C0C0 solid;
       font-family: Arial;
       font-size: 13px;
       font-weight: normal;
       font-style: normal;
       text-decoration: none;
       width: 115px;
       height: 78px;
       vertical-align: middle;
       line-height: 78px;
       text-align: center; 
        background:url(http://img6a.flixcart.com/image/ball/4/g/g/vector-x-football-england-100x100-imade784dbrjbdzp.jpeg) no-repeat 50% 99% #EEEEEE;
        background-size:25px
    }
#main-nav a:nth-child(2){
    background:url(http://www.iconshock.com/img_jpg/BRILLIANT/sports/jpg/128/american_football_icon.jpg) no-repeat 50% 99% #EEEEEE;
    background-size:25px
}
#main-nav a:nth-child(3){
    background:url(http://www.iconshock.com/img_jpg/BRILLIANT/sports/jpg/128/archery_icon.jpg) no-repeat 50% 99% #EEEEEE;
    background-size:25px
}

DEMO

DEMO UPDATED

edited May 24 '13 at 11:30

answered May 24 '13 at 11:17

Sowmya

26,684
21
96
136

yes Just what i am looking for but i want every button have different icon, how to work with this? – Mostafa Biomy May 24 '13 at 11:27
@Mostafa Biomy instead of `CSS nth-type` I would rather add some classes to those buttons, so it would be more clear to read and to undertand for You, besides, if You will have to change order it won't mess up – bumerang May 24 '13 at 11:47
@bumerang FYI nth-child is used to reduce the usage of multiple classes – Sowmya May 24 '13 at 11:50
@Sowmya you mean to make every button has its own class is it will be upper to `CSS nth-type` ? – Mostafa Biomy May 24 '13 at 11:58
@MostafaBiomy Adding multiple class can make your html heavy, that is y pseudo classes are used – Sowmya May 24 '13 at 12:00

PonrajPaul · Answer 3 · 2013-05-24T11:55:30.110

try this. your html

<div id="main-nav">
  <a href="#" class="football">Football</a>
  <a href="#" class="cricket">Cricket</a>
  <a href="#" class="tennis">Tennis</a>
</div>

css

#main-nav a
 {     
  display: block;
  float: left;
  margin: 125px 0px 0px 0px;
  color: #666666;
  border: 1px #C0C0C0 solid;
  background-color: #EEEEEE;
  font-family: Arial;
  font-size: 13px;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 106px;
  height: 78px;
  vertical-align: middle;
  line-height: 78px;
  padding-left:50px;
 }

 #main-nav a.football{
background:url("http://icons.iconarchive.com/icons/ampeross/qetto/32/icon-developer-icon.png") no-repeat 10px;
}
 #main-nav a.cricket{
background:url("http://icons.iconarchive.com/icons/deleket/3d-cartoon/32/Axialis-Icon-Workshop-icon.png") no-repeat 10px;
}
#main-nav a.tennis{
background:url("http://icons.iconarchive.com/icons/deleket/mac-folders/32/Blue-Apple-icon.png") no-repeat 10px;
}
#main-nav a:hover, #main-nav .active
 {
  color: #666666;
  background-color: #C0C0C0;
  border: 1px #C0C0C0 solid; 
}

my fiddle http://jsfiddle.net/ponrajpaul/4VMa4/

or if you want to use same icon for all links, remove all class names from a tags and use like this

<div id="main-nav">
 <a href="#">Football</a>
 <a href="#">Cricket</a>
 <a href="#">Tennis</a>
<div>


#main-nav a{
background:url("http://icons.iconarchive.com/icons/deleket/3d-cartoon/32/Axialis-Icon-Workshop-icon.png") no-repeat 10px;
}

a:nth-child(numbers) will not support in ie6. If you dont need ie old browsers support, nth-child method is best to you..

CSS menu with custom image or icon on every button

3 Answers3