Placing an icon beside the text of an H1 tag by using a span

Question

Here's the HTML I'm trying to use:

<h1>Order Not Paid<span class="not-paid"></span></h1>

Of course if there is a better way please say so.

Currently since there is no text inside of the span, it seems the browsers are ignoring this tag. Firebug shows up grayed out when inspecting.

When I place text in the span, the icon shows correctly.

What CSS rule can I apply for this effect? Here's what I have so far (It's SASS, but easy to grasp):

h1 {
    font-size: 24px;

    span.not-paid {
        background-image: url('/Public/images/remove.png');
        background-repeat: no-repeat;
    }
}

I'd like the icon to appear where the span is.

Alternatively, is it kosher to do something like this? If so, I can settle with this as it looks good on IE8 and modern browsers.

<h1>Order Not Paid <img src="@Url.Content("~/Public/images/remove.png")" alt="" /></h1>

score 7 · Accepted Answer · answered Apr 06 '12 at 23:58

7

If the icon is small and not reused anywhere else just set it as part of the h1.

HTML:

<h1 class="not-paid">Order Not Paid</h1>

CSS:

h1.not-paid {
  font-size: 24px;
  padding:0 16px 0 0; /* whatever the dimensions the image needs */
  background-image: url('/Public/images/remove.png') no-repeat right center; /* Position left/right/whatever */
}

A little cleaner this way.

answered Apr 06 '12 at 23:58

Alex

1,584
1
19
29

Changing `background-image` for `background` worked for me... https://stackoverflow.com/a/14378456/10043987 – ofri cofri Sep 03 '20 at 14:50

score 2 · Answer 2 · answered Apr 06 '12 at 23:45

the background image is not showing up because the span has no width, and therefore is not showing any of the background.

also, the snippet you gave is not valid css.

try something like this, assuming the image is 16px by 16px:

h1 {
  font-size: 24px;
}

span.not-paid {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    width: 16px;
    background-image: url('/Public/images/remove.png');
    background-repeat: no-repeat;
}

The display: inline-block; is to make it so the width will apply. The vertical-align is to center the image on the middle of the line.

All of that said, the <img> tag solution would work too, but it doesn't scale well to a lot of similar images. The css-based solution makes it easier to switch to something like css spriting later.

In either case, you'll probably want to change your direct image urls to relative urls before expecting this page to work in a production environment.

score 0 · Answer 3 · answered Apr 06 '12 at 23:38

0

I'm pretty sure that you need to give the span some width. By default it has none, so of course no background image will be seen.

answered Apr 06 '12 at 23:38

Griffin

13,184
4
29
43

score 0 · Answer 4 · answered Apr 06 '12 at 23:51

First, if you are not using sass and less, your stylesheet is wrong. Next, give inner-block to span and the image height and width.

h1 {
    font- size: 24px;
}

h1 span.not-paid {
    width: 50px;
    height: 50px;
    display: inline-block;
    background-image: url('/Public/images/remove.png');
    background-repeat: no-repeat;
}

Placing an icon beside the text of an H1 tag by using a span

4 Answers4