fix: nodebb/nodebb#10699, fab class conflict with fontawesome

less/account.less

@@ -45,7 +45,7 @@
 			border: 4px solid white;
 			border-radius: 50%;
 
-			.fab.btn-morph {
+			.persona-fab.btn-morph {
 				top: 93px;
 				right: 4px;
 				position: absolute;
@@ -311,7 +311,7 @@
 		background-color: lighten(@brand-primary, 10%);
 	}
 
-	.fab {
+	.persona-fab {
 		color: white;
 		font-size: 20px;
 	}

less/modules/fab.less

@@ -1,4 +1,4 @@
-.fab {
+.persona-fab {
 	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.156863), 0px 2px 10px 0px rgba(0, 0, 0, 0.117647);
 
 	background-color: @brand-primary;
@@ -11,11 +11,11 @@
 	width: 55.5px;
 }
 
-.btn-group.open .dropdown-toggle.fab {
+.btn-group.open .dropdown-toggle.persona-fab {
 	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.156863), 0px 2px 10px 0px rgba(0, 0, 0, 0.117647);
 }
 
-.fab.btn-morph {
+.persona-fab.btn-morph {
 	padding: 0;
 
 	&.heart {

less/modules/usercard.less

@@ -57,7 +57,7 @@
 		}
 	}
 
-	.fab.btn-morph {
+	.persona-fab.btn-morph {
 		top: 75px;
 		right: 15px;
 		position: absolute;

templates/modules/usercard.tpl

@@ -24,8 +24,8 @@
 				<small>[[global:reputation]]</small>
 				<span class="human-readable-number">{reputation}</span>
 			</div>
-			
+
-			<button class="btn-morph fab <!-- IF banned --> hide<!-- ENDIF banned -->">
+			<button class="btn-morph persona-fab <!-- IF banned --> hide<!-- ENDIF banned -->">
 				<span>
 					<span class="s1"></span>
 					<span class="s2"></span>

templates/partials/account/header.tpl

@@ -17,7 +17,7 @@
 
 		<!-- IF loggedIn -->
 		<!-- IF !isSelf -->
-		<button class="btn-morph fab <!-- IF isFollowing -->heart<!-- ELSE -->plus<!-- ENDIF isFollowing -->" title="<!-- IF isFollowing -->[[global:unfollow]]<!-- ELSE -->[[global:follow]]<!-- ENDIF isFollowing -->">
+		<button class="btn-morph persona-fab <!-- IF isFollowing -->heart<!-- ELSE -->plus<!-- ENDIF isFollowing -->" title="<!-- IF isFollowing -->[[global:unfollow]]<!-- ELSE -->[[global:follow]]<!-- ENDIF isFollowing -->">
 			<span>
 				<span class="s1"></span>
 				<span class="s2"></span>

templates/partials/account/menu.tpl

@@ -1,5 +1,5 @@
 <div class="btn-group account-fab bottom-sheet">
-	<button type="button" class="fab dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+	<button type="button" class="persona-fab dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 		<i class="fa fa-ellipsis-v"></i>
 	</button>
 	<ul class="dropdown-menu dropdown-menu-right">