3

This question might be silly to you but It's the reason why I asked is because I always see the source code of some big commercial website having this tag for example and I'm wondering why:

<a href="https://www.mywebsite.com" title="" target="_blank"><i class="myclass" id="myId"></i></a>

and it displays images or icons I guess. So I'm curious and I want to know how to insert an image on html i tag with css.

John Saunders
  • 160,644
  • 26
  • 247
  • 397
timmack
  • 590
  • 2
  • 12
  • 43
  • So where did you see this? Why didn't you inspect the element in question and see how it has been done. Putting a background on an `i` tag is nothing different than any other tag. – putvande Jun 17 '15 at 08:30
  • Wouldn't that be just background-image property for myclass? – JanT Jun 17 '15 at 08:31
  • Just for experimental purposes I tried something like this but it's not showing anything.Any thoughts?Thanks – timmack Jun 17 '15 at 08:35
  • 1
    Well, is the path to the image correct? Also, have you specified height and width on the i-tag? – Rasmus Jun 17 '15 at 08:42
  • 1
    i is displayed by default as inline: you must set it as `display: inline-block` for example or width and height won't have any effect. Or have enough content in it but that's not how this sort of element is (ab)used when it isn't used for displaying a text as italic – FelipeAls Jun 17 '15 at 08:48
  • @Rasmus Yes, I'm sure the path to the image is correct and I also tried something like this specifying the height and width but still not displaying anything. – timmack Jun 17 '15 at 08:49
  • @FelipeAls Thanks you're right I just missed the display mark-up but you need to specify the height and width though in order to display the image within. You can post it as answer. Thanks a lot – timmack Jun 17 '15 at 08:54

1 Answers1

4

You set the background image on an i element the same way that you set it on any other element:

  1. Use the background-image property
  2. Ensure the element has an area to display the background on (either with explicit dimensions (remembering that it is display: inline by default so height and width won't apply unless you change that) or content to give it implicit dimensions).

Such:

i {
    display: inline-block;
    height: 200px;
    width: 200px;
    background-image: url(/foo/bar/baz.jpeg);
}

… but don't use an <i> element for this. Write semantic markup instead.

Use a <span> if you want an inline element that doesn't come with incorrect semantics.

Use an <img> (with an alt attribute) and not a background at all if you are conveying information with the image.

Community
  • 1
  • 1
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Yes, you're right. I was just wondering why they use the i tag instead of span or img that is why I asked. Just for a curiosity reason. Thanks again. – timmack Jun 17 '15 at 08:57