Using tinyicons

[queenofspades]

I was wondering how one would code tinyicons into their layout, instead of using the default ones? I use tinyicons for the journal and community userheads, journal security, openid, and for the track, screen, freeze, and delete buttons. I know another user briefly mentioned how to do this somewhere, but I couldn't figure out how to actually implement it into my custom CSS. I'm using the flexible squares layer, if that's relevant.

Comments

[matgb]

Not certain exactly what you mean, but if you're asking what I think you're asking, I think [LJ/DW] Making profile icons look cool in your layout might be the post you need for the basics, holler if it's either not or you need more to it.

[queenofspades]

Yes, that's exactly what I was asking. Mem'd the entry, thank you!

[feathertail]

I was wondering about that too, thanks!

[ninetydegrees]

If if can help, I've made a Stylish style for customizing icons: http://userstyles.org/styles/17773. These aren't tiny icons but it may help you with the coding.

[queenofspades]

Oh thank you! This is perfect.

[arobynsung]

The code's pretty much like LJ's with a few replacements of img urls. Here's a sample for user/community icons and locked posts:

.ljuser img { width: 0; height: 0; background: transparent url(http://s.dreamwidth.org/img/silk/identity/user.png) no-repeat 0 0; padding: 10px 10px 0 2px !important; vertical-align: baseline !important; } .ljuser img[src*="http://s.dreamwidth.org/img/silk/identity/user.png"] { background: transparent url(http://i29.tinypic.com/2u5upgp.png) no-repeat 0 0 !important; padding: 10px 10px 0 2px !important; } .ljuser img[src*="http://s.dreamwidth.org/img/silk/identity/community.png"] { width: 0; height: 0; background: transparent url(http://i29.tinypic.com/1zu6fs.png) no-repeat scroll 0 0 !important; padding: 10px 10px 0 2px !important; } .subject img { vertical-align: middle !important; } img[src*="icon_protected.gif"]{ width: 0; height: 0; padding: 16px 16px 0px 0px !important; background: transparent url(http://s.dreamwidth.org/img/silk/entry/locked.png) no-repeat scroll 0 0; } img[src*="http://s.dreamwidth.org/img/silk/entry/private.png"]{ width: 0; height: 0; padding: 16px 16px 0px 0px !important; background: transparent url(http://i35.tinypic.com/2mqroux.png) no-repeat scroll 0 0; }

Just replace the urls of the background images with whatever tiny icons you'd prefer :)

Tiny Icon [Code] Generator

[inner_v0ice]

I found the link in this entry in fruitstyle. Just paste the code it generates at the bottom of the CSS for your layout, and you're all set! :D