Web Development

General discussion


Add clickable icons to your links

By MaryWeilage Editor ·
This week's Design and Usability Tactics e-newsletter describes how to add clickable icons to your links.

Where do you usually turn when the obvious technique doesn't produce the effect you might expect or desire? Can you think of any other alternative solutions to Mr. Meadhra's problem?

If you aren't subscribed to the free Design and Usability Tactics e-newsletter, click the following link to automatically sign up:

This conversation is currently closed to new comments.

Thread display: Collapse - | Expand +

All Comments

Collapse -

links wrapped in lists

by shirk99 In reply to Add clickable icons to yo ...

I have noticed that the author prefers to wrap navigation links inside list elements - which are usually themselves wrapped inside a div. Looking for opinions on why is this approach better than just skipping the list elements and putting the links directly inside the containing div? In this discussion, how is the following approach as an alternative?:: Skip the list element. Create each link and place the image inside the link element's tags so the image itself is still clickable. In the stylesheet, make the link use block or inline-block display. Then, for the // a img {...} // rule, add a right-hand margin rule for the image which will move the link's text over a bit. Finishing up, if the link's text is not centered vertically with the image, consider wrapping the text in a span and setting the margin properties for this span to move it higher.

Related Discussions

Related Forums