General discussion

  • Creator
  • #2272724

    Add clickable icons to your links


    by maryweilage ·

    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:

All Comments

  • Author
    • #2715787

      links wrapped in lists

      by shirk99 ·

      In reply to Add clickable icons to your links

      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.

Viewing 0 reply threads