style_system | Icons for metadata

I would like to replace the standard text of my currents for tiny icons, but I'm not sure what to add to the CSS code. Any help is greatly appreciated! :)

/**
 * Soft Keys by aprilclydel_ac @ LiveJournal.com
 * http://calvione.livejournal.com, http://evanessencia.net
 */

/* @font-face */

@font-face {
  font-family: 'Delius Unicase';
  font-style: normal;
  font-weight: 400;
  src: local('Delius Unicase'), local('DeliusUnicase-Regular'), url(http://themes.googleusercontent.com/static/fonts/deliusunicase/v6/b2sKujV3Q48RV2PQ0k1vqiiT6GQZqXe56UwGtNcbg_g.woff) format('woff');
}

@font-face {
  font-family: 'Delius Unicase';
  font-style: normal;
  font-weight: 700;
  src: local('Delius Unicase Bold'), local('DeliusUnicase-Bold'), url(http://themes.googleusercontent.com/static/fonts/deliusunicase/v6/7FTMTITcb4dxUp99FAdTqLrq9kGEa_BMz9YVDYs3nGY.woff) format('woff');
}

@font-face {
    font-family: 'TuffyRegular';
    src: url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy-webfont.eot');
    src: url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy-webfont.woff') format('woff'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy-webfont.ttf') format('truetype'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy-webfont.svg#TuffyRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TuffyItalic';
    src: url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Italic-webfont.eot');
    src: url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Italic-webfont.woff') format('woff'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Italic-webfont.ttf') format('truetype'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Italic-webfont.svg#TuffyItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TuffyBold';
    src: url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold-webfont.eot');
    src: url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold-webfont.woff') format('woff'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold-webfont.ttf') format('truetype'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold-webfont.svg#TuffyBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TuffyBoldItalic';
    src: url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold_Italic-webfont.eot');
    src: url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold_Italic-webfont.woff') format('woff'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold_Italic-webfont.ttf') format('truetype'),
         url('https://dl.dropbox.com/u/23893055/%40font-face/Tuffy/Tuffy_Bold_Italic-webfont.svg#TuffyBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* global & default overrides */

html, body {
	margin: 0;
	padding: 0;
	background-color: #F6F6F6;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 13px;
}

a {
	text-decoration: none;
	color: #10ABA9;
	-webkit-transition: color 0.3s linear;
	   -moz-transition: color 0.3s linear;
	    -ms-transition: color 0.3s linear;
	     -o-transition: color 0.3s linear;
	        transition: color 0.3s linear;
}

a:hover {
	color: #0A7A79;
        text-decoration: 
}

b, strong {
	font-family: 'TuffyBold';
}

i, em {
	font-family: 'TuffyItalic';
}

b i, b em, strong i, strong em, i b, i strong, em b, em strong {
	font-family: 'TuffyBoldItalic';
}

/* wrappers */

#content-outer, #content {
	margin: 0 auto;
	padding: 0;
}

#content {
	width: 950px;
}

/* header */

#header {
	margin: 0 0 15px;
	padding: 30px;
}

.navheader {
	margin: 0;
	padding: 0;
	float: right;
	list-style: none;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 13px;
}

.navheader li, .navfooter li {
		margin: 0 5px;
		padding: 5px 50px 5px 15px;
		background-color: #FFF;
		border: #CCC 1px solid;
		display: inline;
		-webkit-border-radius: 30px;
		   -moz-border-radius: 30px;
		    -ms-border-radius: 30px;
		     -o-border-radius: 30px;
		        border-radius: 30px;
		-webkit-transition: box-shadow 0.3s linear;
		   -moz-transition: box-shadow 0.3s linear;
		    -ms-transition: box-shadow 0.3s linear;
		     -o-transition: box-shadow 0.3s linear;
		        transition: box-shadow 0.3s linear;
	}
	
	.navheader li:hover, .navheader li.view, .navfooter li:hover, .navfooter li.viewing {
		-webkit-box-shadow: #CCC 0 0 10px inset;
		   -moz-box-shadow: #CCC 0 0 10px inset;
		    -ms-box-shadow: #CCC 0 0 10px inset;
		     -o-box-shadow: #CCC 0 0 10px inset;
		        box-shadow: #CCC 0 0 10px inset;
	}
	
.title {
	margin: 0;
	padding: 30px 0 0;
	clear: right;
	font-family: 'Delius Unicase', sans-serif;
	font-size: 30px;
}

.subtitle {
	margin: 0;
	padding: 0;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 13px;
	letter-spacing: 15px;
	text-align: center;
}

/* sidebar */

#sidebar {
	margin: 0;
	padding: 0;
	clear: right;
	width: 200px;
	float: right;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 13px;
}

.defaultuserpic {
	margin: 0 auto;
	padding: 5px;
	width: 70px;
	height: 70px;
	background-color: #FFF;
	-webkit-border-radius: 40px;
	   -moz-border-radius: 40px;
		-ms-border-radius: 40px;
		 -o-border-radius: 40px;
			border-radius: 40px;
	-webkit-box-shadow: #CCC 0 0 5px;
	   -moz-box-shadow: #CCC 0 0 5px;
	    -ms-box-shadow: #CCC 0 0 5px;
	     -o-box-shadow: #CCC 0 0 5px;
	        box-shadow: #CCC 0 0 5px;
}

.defaultuserpic img {
		margin: 0 auto;
		width: 70px;
		height: 70px;
		-webkit-border-radius: 35px;
		   -moz-border-radius: 35px;
			-ms-border-radius: 35px;
			 -o-border-radius: 35px;
				border-radius: 35px;
	}

.sbarlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sbarbody, .sbarbody2 {
	margin: 0 0 15px;
	padding: 15px 10px;
	-webkit-border-radius: 30px;
	   -moz-border-radius: 30px;
	    -ms-border-radius: 30px;
	     -o-border-radius: 30px;
	        border-radius: 30px;
}

.sbartitle {
	margin: 0 0 5px;
	padding: 0;
	font-family: 'Delius Unicase', sans-serif;
	font-size: 20px;
}

.sbarcontent {
	margin: 0;
	padding: 0;
}

.sbaritem {
	margin: 2px 0;
	padding: 5px 15px;
	background-color: #FFF;
	border-color: #CCC;
	border-width: 0 1px 1px 0;
	border-style: solid;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 11px;
	-webkit-border-radius: 30px;
	   -moz-border-radius: 30px;
	    -ms-border-radius: 30px;
	     -o-border-radius: 30px;
	        border-radius: 30px;
}

.sbaritem:hover {
	border-width: 1px 0 0 1px;
}

#sidebar_calendar {
	display: none;
}

.tagcloud {
}

/* maincontent */

#maincontent {
	margin: 0 215px 0 0;
	padding: 0;
}

.subcontent {
	margin: 0;
	padding: 5px;
	background-color: #FFF;
	-webkit-border-radius: 30px;
	   -moz-border-radius: 30px;
	    -ms-border-radius: 30px;
	     -o-border-radius: 30px;
	        border-radius: 30px;
	-webkit-box-shadow: #CCC 0 0 5px;
	   -moz-box-shadow: #CCC 0 0 5px;
	    -ms-box-shadow: #CCC 0 0 5px;
	     -o-box-shadow: #CCC 0 0 5px;
	        box-shadow: #CCC 0 0 5px;
}

.userpic, .userpicfriends, .datesubject {
	float: left;
}

.datesubject {
	margin: 0;
	padding: 5px;
}

.date {
	margin: 0;
	padding: 2px;
	font-family: 'Courier New', 'Courier', monospace;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 5px;
}

.subject {
	margin: 0;
	padding: 5px;
	font-family: 'Delius Unicase', sans-serif;
	font-size: 30px;
}

.subject a {
	}

.userpic, .userpicfriends {
	margin: -25px 0 0 -25px;
	padding: 10px;
	width: 100px;
	height: 100px;
	text-align: center;
	color: #FFF !important; 
	background: #FFF !important;
	-webkit-border-radius: 60px;
	   -moz-border-radius: 60px;
	    -ms-border-radius: 60px;
	     -o-border-radius: 60px;
	        border-radius: 60px;
	-webkit-box-shadow: #CCC 0 0 5px;
	   -moz-box-shadow: #CCC 0 0 5px;
	    -ms-box-shadow: #CCC 0 0 5px;
	     -o-box-shadow: #CCC 0 0 5px;
	        box-shadow: #CCC 0 0 5px;
}

.userpic img, .userpicfriends img {
		width: 100px;
		height: 100px;
		-webkit-border-radius: 50px;
		   -moz-border-radius: 50px;
		    -ms-border-radius: 50px;
		     -o-border-radius: 50px !important;
		        border-radius: 50px;
	}
	
	.userpicfriends a {
		margin: -120px 0 0;
		padding: 5px;
		position: relative;
		background-color: #10ABA9;
		float: left;
		z-index: 200;
		font-family: 'TuffyRegular', sans-serif;
		font-size: 11px;
		color: #FFF;
		-webkit-transition: background-color 0.3s ease;
		   -moz-transition: background-color 0.3s ease;
		    -ms-transition: background-color 0.3s ease;
		     -o-transition: background-color 0.3s ease;
		        transition: background-color 0.3s ease;
	}
	
	.userpicfriends a:hover {
		background-color: #0A7A79;
	}
	
	.userpicfriends font {
		color: #FFF !important;
	}

.entry {
	margin: 0;
	padding: 10px;
	clear: left;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 13px;
	line-height: 1.75;
}

.entry_text {
	text-align: justify;
}

.ljtags {
	margin: 30px 0 0;
	padding: 15px 15px 0;
	background-color: #E9E9E9;
	-webkit-border-radius: 30px 30px 0 0;
	   -moz-border-radius: 30px 30px 0 0;
	    -ms-border-radius: 30px 30px 0 0;
	     -o-border-radius: 30px 30px 0 0;
	        border-radius: 30px 30px 0 0;
}

.currents {
	margin: 0;
	padding: 0 15px 15px;
	background-color: #E9E9E9;
	-webkit-border-radius: 0 0 30px 30px;
	   -moz-border-radius: 0 0 30px 30px;
	    -ms-border-radius: 0 0 30px 30px;
	     -o-border-radius: 0 0 30px 30px;
	        border-radius: 0 0 30px 30px;
}

/** Do you tag your entries or do you not?
 * You told me once but I forgot.

.ljtags {
	display: none;
}

.currents {
	margin: 30px 0 0;
	padding: 15px;
	background-color: #E9E9E9;
	-webkit-border-radius: 30px;
	   -moz-border-radius: 30px;
	    -ms-border-radius: 30px;
	     -o-border-radius: 30px;
	        border-radius: 30px;
}*/

.comments {
	margin: 0;
	padding: 10px;
	text-align: right;
}

.skiplinks {
	margin: 0 0 30px;
	padding: 0;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 13px;
	text-align: center;
}

.separator {
	margin: 0;
	padding: 50px 0 0;
}

.year {
	margin: 0;
	padding: 0;
	list-style: none;
}

.year li {
		display: inline;
		font-family: 'Delius Unicase', sans-serif;
		font-size: 20px;
	}

/* comments */

.box {
	margin: 0;
	padding: 0;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 13px;
}

.commentbox {
	margin: 15px auto;
	padding: 15px;
	background-color: #FFF;
	-webkit-border-radius: 30px;
	   -moz-border-radius: 30px;
	    -ms-border-radius: 30px;
	     -o-border-radius: 30px;
	-webkit-box-shadow: #CCC 0 0 5px;
	   -moz-box-shadow: #CCC 0 0 5px;
	    -ms-box-shadow: #CCC 0 0 5px;
	     -o-box-shadow: #CCC 0 0 5px;
	        box-shadow: #CCC 0 0 5px;
	border-radius: 30px;
}

.datesubjectcomment {
	margin: 0;
	padding: 5px 5px 15px 5px;
	border-bottom: #CCC 1px solid;
}

.userpiccomment {
	margin: 10px;
	padding: 0;
	width: 70px;
	height: 70px;
	float: right;
	-webkit-border-radius: 35px;
	   -moz-border-radius: 35px;
	    -ms-border-radius: 35px;
	     -o-border-radius: 35px;
	        border-radius: 35px;
}

.commentreply {
	margin: 0;
	padding: 15px 5px 5px;
	line-height: 1.5;
}

/* footer */

#footer {
	margin: 30px auto 0;
	padding: 0;
}

.navfooter {
	margin: 0;
	padding: 0;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 13px;
}

/* input & output */

code, kbd, tt, pre {
	font-family: 'Courier New', 'Courier', monospace;
}

input, textarea, {
	padding: 5px;
	background-color: #F6F6F6;
	border: none;
	font-family: 'TuffyRegular', sans-serif;
	font-size: 13px;
}

button, input[type="submit"], input[type="button"] {
	border: #10ABA9 1px solid;
}

button {
}

/* tiny icons
   Generated by Malionette's Tiny Icon Generator 
   http://malionette.net/generator/tinylite.html */

span.i-ljuser img[src*="img/userinfo.gif"] {
	width: 0 !important;
	height: 0 !important;
	background: transparent url(http://i.imgur.com/C6ttE.png) no-repeat !important;
	padding: 16px 0 0 16px !important;
}

span.i-ljuser img[src*="img/community.gif"] {
	width: 0 !important;
	height: 0 !important;
	background: transparent url(http://i.imgur.com/TYhJj.png) no-repeat !important;
	padding: 16px 0 0 16px !important;
}

/* extra */

.clear, .clearfoot {
	margin: 0;
	padding: 0;
	height: 0;
}

.clear {
	clear: left;
}

.clearfoot {
	clear: both;
}

::-webkit-selection {
	background-color: #3399ff;
	color: #F6F6F6;
}

::-moz-selection {
	background-color: #3399ff;
	color: #F6F6F6;
}

::selection {
	background-color: #3399ff;
	color: #F6F6F6;
}

.entry img { max-width: 600px; !important;
}

Flat | Top-Level Comments Only

The icon for the tags now shows up nicely, but I can't seem to get rid of the tag text.

When I say alignment, I mean horizontally. I got these icons after seeing them on someone else's journal, where the alignment looked fine. Would it make a difference if I used other icons?

Yeah, that's the thing about Flexible Squares. The tag label has no class to identify it by. There's a way around it, but it gets rid of all of the non-link text. Some people use gaps to separate the tags instead. Here's the code if you're okay with that/want to try it out.

.ljtags {
font-size: 0px; }

.ljtags a {
font-size: 10.5px;
padding-right: 10px; }

Hmm, I can't imagine why it would show up differently. Maybe if I had a screenshot of what you're currently seeing and a screenshot of what you'd like it to be, I could try to figure out why.

Alternatively, there is a theme layer code for replacing the text with icons without css, one that actually eliminates the tags label without having to try to work around it. Here's the code, if you're interested.

I'm sorry, I wish I could be of more help!

I tried the workaround and that seems to do the trick without anything else looking off. :)

I have a couple of screenshots. The first one is what I am seeing in my journal, the second one is what I would like it to be as the icons seem to look nicely aligned with the text.

Screenshot 1:

Screenshot 2:

I think I understand what you're looking for but I can't seem to make it look consistent while I'm testing it out. I'm sorry.

That's okay, you're already golden for your help so far. Thank you! :)

You're welcome~

Icons for metadata

no subject

no subject

no subject

no subject

no subject

no subject