Use of Tiny Icons, Problem Solved

[deanshot1]

 Hi there,

I was wondering if there was a way to use Tiny Icon Images instead of  text like Location, Current Music, Mood. 

Any help would be most appreciated. 

Problem Solved

Comments

[syntheid]

You could add in your CSS something like:

/* this hides the text visually, note this hides it on all of them, so if you want to only replace some headers, make sure to use their specific class like .metadata-label-mood instead of just .metadata-label */
.metadata-label {
  border: 0;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}
/* this adds a pseudo element to put an image into */
.metadata-label:before {
  content: '';
  display: inline-block;
}
/* these define the image replacements, make sure to use the width/height of your image */
.metadata-label-mood:before {
  background: url(http://yourimage.jpg);
  width: 20px;
  height: 20px;
}
.metadata-label-music:before {
  background: url(http://yourimage.jpg);
  width: 20px;
  height: 20px;
}
.metadata-label-location:before {
  background: url(http://yourimage.jpg);
  width: 20px;
  height: 20px;
}

[deanshot1]

Would it be the same coding for the Tags text or is that something different, I forgot to add that the original post. The others have worked.

[syntheid]

Um, it looks like tags are not part of metadata, so the structure's slightly different. But you should be able to:

/* this hides the text visually, note this hides it on all of them, so if you want to only replace some headers, make sure to use their specific class like .metadata-label-mood instead of just .metadata-label */ .tag-text, .metadata-label { border: 0; font: 0/0 a; text-shadow: none; color: transparent; } /* this adds a pseudo element to put an image into */ .tag-text:before, .metadata-label:before { content: ''; display: inline-block; } /* these define the image replacements, make sure to use the width/height of your image */ .metadata-label-mood:before { background: url(http://yourimage.jpg); width: 20px; height: 20px; } .metadata-label-music:before { background: url(http://yourimage.jpg); width: 20px; height: 20px; } .metadata-label-location:before { background: url(http://yourimage.jpg); width: 20px; height: 20px; } .tag-text:before { background: url(http://yourimage.jpg); width: 20px; height: 20px; }

[deanshot1]

Thank you for all your help, it all worked wonderfully.