Icon is loaded, but not shown (html, css)

Question

I have an icon which is actually on my webpage but I still cant see it.

HTML

<i class="iconMan"></i>

CSS

.iconMan{
    background-image: url(../../assets/imgs/iconMan.png);
    display: block;
  }

this is what I get:

The Icon should be next to "Test User" but it's not showing. I already tried adjusting height and width but it didn't work. Any suggestions what I could do?

Answer 1

for displaying an icon you can move your styling to the ::after or ::before pseudo selectors.

.iconMan {
    display: inline-block;
}

.iconMan::before {
    content: url(../../assets/imgs/iconMan.png);
}

Answer 2

try to do like this

<img src="/assets/imgs/iconMan.png"

I guess it will work just put this to your html code

Answer 3

You have missed quotes

.iconMan{
    background-image: url("../../assets/imgs/iconMan.png");
    display: block;
  }