Firefox doesn't show images

Question

We have a gridx with various span tag linked to a css with images.

HTML in gridx:

<span class="icon active"/>

CSS:

.icon.active{
   content:url(../imgs/attivo.png);
   height: 16px;
}

The problem is that with Firefox it loads the images (we can see it with firebug) but we can't see them. In all the other browsers it works fine.

Answer 1

Try .icon.active::after

 .icon.active::after{ content:url('https://placeholdit.imgix.net/~text?txtsize=5&txt=i&w=26&h=26'); height: 26px; } 

 <div class="table"><span class="icon active"></span></div> <div class="table"><span class="icon active"></span></div> <div class="table"><span class="icon active"></span></div> <div class="table"><span class="icon active"></span></div> 

OR background-image:

 .icon.active { background: url('https://placeholdit.imgix.net/~text?txtsize=5&txt=Q&w=26&h=26') no-repeat; height: 26px; width: 26px; display: inline-block; content: ""; } 

 <div class="table"><span class="icon active"></span></div> <div class="table"><span class="icon active"></span></div> <div class="table"><span class="icon active"></span></div> <div class="table"><span class="icon active"></span></div> 

Answer 2

You can try

class="Haldocompose"

Link to Docs: https://docs.google.com/document/d/10i5agK1Ot1eiB_R5JVEVHY41B0rEvjVyeQ1rl50DTdY/edit