How to insert background image on HTML <i> Tag using css?

Question

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.

Answer 1

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.