3

I created the following:

        <div style="margin-top: 1.2em">
            <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>
            <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i>
            <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i>
        </div>

Can someone tell me how I can make it so clicking on one of these icons or a word below it takes me to a link?

What I would like to do is to make it so the icons appear like this:

 xxxxxx     xxxxxx     xxxxxx
 xxxxxx     xxxxxx     xxxxxx
 xxxxxx     xxxxxx     xxxxxx

  Home       Admin     Setting 

So that when I click anywhere from the top of the icon to the bottom of the words below that this is the same as clicking in an:

 <a href="/home">Home</a>
 <a href="/admin">Admin</a>
 <a href="/setting">Setting</a>

link.

Update

I believe maybe I need a solution that uses DIVs. I tried both answers given to me and both make the icons appear vertical. Also the second answer maybe is not idea as it has multiple hrefs for the same link. Hope someone can help out with another answer.

3 Answers 3

8

No divs necessary. Something like this should work. fiddle

<a href="/home" class="icon-block">
    <i class="icon-home icon-4x"></i>
    <span>Home</span>
</a>
<a href="/admin" class="icon-block">
    <i class="icon-th icon-4x"></i>
    <span>Admin</span>
</a>
<a href="/settings" class="icon-block">
    <i class="icon-cog icon-4x"></i>
    <span>Settings</span>
</a>

CSS

a.icon-block {
        display:inline-block;
        width:10em;
        float:left;
        text-align:center;
    }

    a.icon-block i,
    a.icon-block span {
        display:block;
        width:100%;
        clear:both;
    }
2

Try:

<div style="margin-top: 1.2em">
    <a href="/home">
        <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>
        <br />
        <span class="normal">Home</span>
    </a>
    <a href="/admin">
        <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i>
        <br />
        <span class="normal">Admin</span>
    </a>
    <a href="/setting">
        <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i>
        <br />
        <span class="normal">Setting</span>
    </a>
</div>

And then in your css, give the .normal class a different font family

.normal{
    font-family: "Your Font";
}
1
  • I tried this but the spacing is very wrong. The icons appear in a column and the words for Home, Admin and Setting appear to the left or right of the icon. I think I need a solution that uses DIVs but I am not sure how to implement this.
    – user1943020
    Commented Sep 1, 2013 at 19:30
1

Try this Div version.

<div style="margin-top: 1.2em">
    <div class="go-inline">
        <div>
            <a href="/home">
                <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>
            </a>
        </div>
        <div class="go-middle">
            <a href="/home">
                <span class="normal">Home</span>
            </a>
        </div>
    </div>
    <div class="go-inline">
        <div>
            <a href="/admin">
                <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i>
            </a>
        </div>
        <div class="go-middle">
            <a href="/admin">
               <span class="normal">Admin</span>
            </a>
        </div>
    </div>
    <div class="go-inline">
        <div>
            <a href="/setting">
                <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i>
            </a>
        </div>
        <div class="go-middle">
            <a href="/setting">
                <span class="normal">Setting</span>
            </a>
        </div>
    </div>
</div>

and css class

go-middle{ text-align:center;}
go-inline { display:inline-block; vertical-align:top;}

P/s. some css/div structure editing will be fine. Try to build it with your own style. =D

1
  • 1
    Sorry but this solution does not work at all. The icons all appear below each other and not horizontal :-(
    – user1943020
    Commented Sep 2, 2013 at 5:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.