user-icon styles for new teaser partials

less/categories.less

@@ -107,6 +107,15 @@
 					display: none;
 				}
 			}
+
+			.user-icon {
+				display: inline-block;
+				border-radius: 50%;
+				height: 24px;
+				width: 24px;
+				line-height: 24px;
+				font-size: 1.5rem;
+			}
 		}
 	}
 }

less/category.less

@@ -81,6 +81,15 @@
 			.fa-stack {
 				font-size: 90%;
 			}
+
+			.card .user-icon {
+				display: inline-block;
+				border-radius: 50%;
+				height: 24px;
+				width: 24px;
+				line-height: 24px;
+				font-size: 1.5rem;
+			}
 		}
 
 		&:last-child li {

templates/partials/categories/lastpost.tpl

@@ -3,7 +3,13 @@
 	<!-- IF @first -->
 	<div component="category/posts">
 		<p>
-			<a href="{config.relative_path}/user/{../user.userslug}"><img class="user-img" title="{../user.username}" src="{../user.picture}" /></a>
+			<a href="{config.relative_path}/user/{../user.userslug}">
+				<!-- IF ../user.picture -->
+				<img class="user-img" title="{../user.username}" src="{../user.picture}" />
+				<!-- ELSE -->
+				<span class="user-icon user-img" style="background-color: {../user.icon:bgColor};">{../user.icon:text}</span>
+				<!-- ENDIF ../user.picture -->
+			</a>
 			<a class="permalink" href="{config.relative_path}/topic/{../topic.slug}<!-- IF ../index -->/{../index}<!-- ENDIF ../index -->">
 				<small class="timeago" title="{../relativeTime}"></small>
 			</a>

templates/partials/topics_list.tpl

@@ -81,7 +81,13 @@
 				</p>
 				<!-- ELSE -->
 				<p>
-					<a href="{config.relative_path}/user/{topics.teaser.user.userslug}"><img title="{topics.teaser.user.username}" class="user-img" src="{topics.teaser.user.picture}" /></a>
+					<a href="{config.relative_path}/user/{topics.teaser.user.userslug}">
+						<!-- IF topics.teaser.user.picture -->
+						<img title="{topics.teaser.user.username}" class="user-img" src="{topics.teaser.user.picture}" />
+						<!-- ELSE -->
+						<span class="user-icon user-img" style="background-color: {topics.teaser.user.icon:bgColor};">{topics.teaser.user.icon:text}</span>
+						<!-- ENDIF topics.teaser.user.picture -->
+					</a>
 					<a class="permalink" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}">
 						<span class="timeago" title="{topics.teaser.timestamp}"></span>
 					</a>