using fancy new mixin

less/categories.less

@@ -31,12 +31,8 @@
 			}
 
 			img, .user-icon {
+				.user-icon-style(46px, 2.4rem, 50%);
 				margin-right: 15px;
-				width: 46px;
-				height: 46px;
-				line-height: 46px;
-				font-size: 2.4rem;
-				border-radius: 50%;
 			}
 
 			h2 {
@@ -52,10 +48,7 @@
 
 			@media (max-width: @screen-sm-max) {
 				.user-img, .user-icon {
-					width: 32px;
+					.user-icon-style(@border-radius: 50%);
-					height: 32px;
-					line-height: 32px;
-					font-size: 1.5rem;
 					margin-right: 8px;
 				}
 				h2 {
@@ -110,11 +103,7 @@
 
 			.user-icon {
 				display: inline-block;
-				border-radius: 50%;
+				.user-icon-style(24px, 1.5rem, 50%);
-				height: 24px;
-				width: 24px;
-				line-height: 24px;
-				font-size: 1.5rem;
 			}
 		}
 	}

less/category.less

@@ -84,11 +84,7 @@
 
 			.card .user-icon {
 				display: inline-block;
-				border-radius: 50%;
+				.user-icon-style(24px, 1.5rem, 50%);
-				height: 24px;
-				width: 24px;
-				line-height: 24px;
-				font-size: 1.5rem;
 			}
 		}
 

less/groups.less

@@ -27,9 +27,7 @@
 				display: inline-block;
 
 				img, .user-icon {
-					width: 32px;
+					.user-icon-style();
-					height: 32px;
-					line-height: 32px;
 				}
 			}
 
@@ -135,9 +133,7 @@
 
 	[component="groups/members"], [component="groups/pending"], [component="groups/invited"] {
 		img, .user-icon {
-			width: 32px;
+			.user-icon-style();
-			height: 32px;
-			line-height: 32px;
 		}
 
 		.member-name {

less/header.less

@@ -16,12 +16,8 @@
 			clear: both;
 
 			img, .user-icon {
-				width: 32px;
+				.user-icon-style(@border-radius: 50%);
-				height: 32px;
-				line-height: 32px;
-				font-size: 1.5rem;
 				float: left;
-				border-radius: 50%;
 			}
 
 			a {
@@ -98,12 +94,8 @@
 				}
 
 				img, .user-icon {
-					width: 32px;
+					.user-icon-style(@border-radius: 50%);
-					height: 32px;
-					line-height: 32px;
-					font-size: 1.6rem;
 					margin-right: 1em;
-					border-radius: 50%;
 				}
 			}
 
@@ -137,12 +129,8 @@
 		padding: 10px 15px;
 
 		img, .user-icon {
-			width: 30px;
+			.user-icon-style(30px, 1.8rem, 50%);
-			height: 30px;
-			border-radius: 50%;
 			border: 0px none;
-			font-size: 1.8rem;
-			line-height: 30px;
 
 			span {
 				font-size: 14px;

less/mobile.less

@@ -161,13 +161,10 @@
 		z-index: 1;
 
 		img, .user-icon {
+			.user-icon-style(70px, 4rem);
 			position: absolute;
 			bottom: -22px;
 			left: 93px;
-			width: 70px;
-			height: 70px;
-			line-height: 70px;
-			font-size: 4rem;
 			border-radius: 50%;
 		}
 

less/topic.less

@@ -42,11 +42,7 @@
 
 			img, .user-icon {
 				margin-right: 15px;
-				width: 46px;
+				.user-icon-style(46px, 2.4rem, 50%);
-				height: 46px;
-				border-radius: 50%;
-				font-size: 2.4rem;
-				line-height: 46px;
 			}
 		}
 
@@ -195,10 +191,7 @@
 			margin-top: 5px;
 
 			img, .user-icon {
-				width: 23px;
+				.user-icon-style(23px, 1.3rem);
-				height: 23px;
-				font-size: 1.3rem;
-				line-height: 23px;
 			}
 		}
 	}
@@ -339,11 +332,8 @@
 		position: relative;
 
 		img, .user-icon {
-			border-radius: 50%;
+			.user-icon-style(20px, 1rem, 50%);
-			width: 20px;
-			height: 20px;
 			vertical-align: middle;
-			line-height: 20px;
 			margin: 0 7px;
 		}
 

less/users.less

@@ -44,11 +44,7 @@
 		width: 104px;
 
 		img, .user-icon {
-			width:80px;
+			.user-icon-style(80px, 4rem, 50%);
-			height:80px;
-			border-radius: 50%;
-			line-height: 80px;
-			font-size: 4rem;
 		}
 
 		a {