0

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.

enter image description here

Stefano
  • 293
  • 1
  • 4
  • 22

2 Answers2

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>
eye-wonder
  • 1,181
  • 9
  • 17
-1

You can try 

class="Haldocompose"

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

Alex il mezzo
  • 1
  • 1