Image icons

[damylen]

Is it possible to link to image (.png) files instead of using the fontawesome images? I need special icons, not available in any font pack.

[Warz]

I just implemented PNG icons in my site, you can do this with png sprites and css.

Example:

CSS (you might have to adjust this):

.sprite {
  vertical-align: middle;
  width: 16px;
  height: 16px;
  line-height: 1;
  background-repeat: no-repeat;
}

.sprite[class*="fatcow-"] {
  background-image: url(/images/fatcow-sprite.png) !important;
}

.fatcow-brick {
  background-position: -1383px -109px !important;
}

.tree-icon.tree-themeicon-custom.sprite {
  vertical-align: middle;
  margin-bottom: 0.2em;
  margin-right: 0.1em;
}

Json:

{
    "text" : "your text goes here",
    "icon" : "sprite fatcow-brick",
}

PNG:
You'll need to generate a PNG sprite using your icons, I've used this to generate mine:
https://draeton.github.io/stitches/

[DPalmaEng]

Hi @Warz

I'm a beginner, I tried, but I didn't succeed. I used the same code as yours with another image. The only difference is that my tree has no check boxes. Any light?

Tks.

[DPalmaEng]

I got it, thank you.