Icon to the right of list item

HTML & CSS
1

I would like to be able to have a small question mark help icon as a link next to each vertical UL list item just as the bullet image but to the right of the text.

Can anybody suggest how this can be done?

Thanks

2

You would need to make the link in HTML since CSS can’t do that. Perhaps in your <li>, place a <span> in there with the question mark.

3

If it’s only an icon and not a link, wouldn’t the pseudo :after work?

4

He says he wants the link though.

5

What am I missing here? Why not just an <img>?

6

:d’oh: so he does. Time to get a :coffee: :blush:

7

Why an image apposed to using a “?” with the right font? Why have an image of a “?” ?

Genuinely curious why you’d want that.

8

I wouldn’t - that’s what I was missing. I was thinking icon=image, not ?=punctuation.

9

Ah well it depends on how he wants it to look. It might very well be he can’t style a text character “?” like he wants so he might just want a small image and in that case, sure I agree you can just use <img> . I wasn’t talking in terms of images so that’s our misunderstanding :slight_smile: . He might have meant an image. I didn’t sleep much last night. I might be bonkers…

10

vs ?

Though with Font Awesome I think you could get the same look.

1 Like
11

Exactly.

Often you can get the right font, and then use some CSS (border radius, yellow background, box shadow for that example) to get the same look of an image and save yourself the loading times of an image.

I try and do it that way before resorting to an image. Perhaps OP has an image ready though.

12

This is the effect that I would like.

The question mark is to be a link to another page with help on that list item or even a popup text box on hover. It is getting the ? image positioned correctly that I do not know how to do.

Thanks in anticipation.

13

Do as I said - this would be an example LI

<li>Speeds: 15-30 kph<a href="#">?</a></li>

To style, give these properties.
border-radius
color:#FFF
background:blue;

Mess around after that.

14

Very Simple:

<ul class="icon_example">
     <li class="phone"><a href="tel:555-1234">555-1234</a></li>
     <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=strider64">@Strider64</a></li>
</ul>

Then the CSS would look something like this

.icon_example {
   list-style: none;
   font-size: 0.9em;
   padding: 0;
   margin: 0;
}
.icon_example a {
   display: block;
   min-height: 20px;
   background-repeat: no-repeat;
   background-position: 20px 20px;
   padding: 0 0 0 30px;
   margin: 0 0 10px;
}
.icon_example li.phone a {
   background-image: url('../image/phone.png'); 
}
.icon_example li.twitter a {
   background-image: url('../image/twitter.png');
}

Of course you would just do ;

.icon_example li a {
  background-image: url('../image/question_mark.png');
}

If you just want all questions marks.

An you would obviously have to give icon location, adjust the icon size and position to fit your need (specially if you want it to the right of the text), that or just use font-awesome if you don’t want to roll with your own. :wink:

15

Thanks Pepster

I have tried this and I cannot get it to work.

What size are your images just in case that is causing my problem?

Any chance of an online page with this on that I can compare?

Cheers

16

highandwild,

This is an application of @RyanReese 's method, with trimmings.

I used a placeholder in place of your antenna icon. The icon looks good, too. File number “-3” allows the text to wrap while keeping the left icon beside the top line. If you can guarantee that the text will never wrap, then the icon can be inserted without the :before box and the code becomes a couple of notches simpler as in file number “-1”.

This text can wrap. Icon remains with top line.
QuestionMarkLinkAfter’li’Text-3.html (2.2 KB)

This test should not wrap.
QuestionMarkLinkAfter’li’Text-1.html (1.8 KB)

Both files adjust to users font size. Tested in FF, Chrome.

1 Like
17

use span & display block & give it a background image or alternatively use a img element

18

If you’re going to do that then just use a <div> . No point doing it your way.

19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.