MyBB Community Forums

I converted my forum (Flatty Theme) over to Font Awesome 5 with local hosted icons but I am having trouble with 2 areas!

1. Thread Tool Icons

2. PM Sub Folders in the Messenger block of the User CP Nav

I can change the icons but I can't seem to get the FA 5 code to work in the CSS for these 2 areas.

Here is what I have so far...

showthread.css

ul.thread_tools,
ul.thread_tools li {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.thread_tools li:before {
	font-family: Font Awesome 5 Free;
	display: inline-block;
	padding: 0px 0px 2px 2px;
	margin-bottom: 2px;
}

ul.thread_tools li.printable:before {
	font-size: 13px;
	content: "\f02f"; 
	color: #666;
	padding-right: 5px;
}

ul.thread_tools li.sendthread:before {
	font-size: 13px;
	content: "\f1d8"; 
	padding-right: 5px;
}

ul.thread_tools li.subscription_add:before {
	font-size: 13px;
	content: "\f02e"; 
	color: #666;
	padding-right: 6px;
	padding-left: 3px;
}

ul.thread_tools li.subscription_remove:before {
	font-size: 13px;
	content: "\f097"; 
	color: #666;
	padding-right: 6px;
	padding-left: 3px;
}

ul.thread_tools li.poll {
	background-position: 0 -80px;
}

.showthread_spinner {
	width: 100%;
	margin: 0 auto;
	display: block;
	text-align: center;
	padding: 20px;
}

And this is the result:
[attachment=42299]

Here is the code from my usercp.css

.usercp_nav_item { display: block; padding: 1px; } 

.usercp_nav_composepm { background-position: 0 0; }
.usercp_nav_pmfolder { background-position: 0 -20px; }
.usercp_nav_sub_pmfolder { padding-left: 20px; }
.usercp_nav_sub_pmfolder i:before { font-family: "Font Awesome 5 Free"; content: "\f115"; color: #d98b3a; font-weight: 900; }
.usercp_nav_trash_pmfolder { padding-left: 21px; }
.usercp_nav_trash_pmfolder i:before { font-family: "Font Awesome 5 Free"; content: "\f014"; color: #777; padding-right: 3px; font-weight: 900; }
.usercp_nav_email { padding-left: 18px; }
.usercp_nav_password { padding-left: 18px; }
.usercp_nav_username { padding-left: 18px; margin-top: 4px; }
.usercp_nav_editsig { padding-left: 7px; }
.usercp_nav_avatar { padding-left: 7px; margin-top: 7px;  }

.usercp_notepad { width: 99%; }

.usercp_container {
	margin: 5px;
	padding: 8px;
	border:1px solid #ccc; }

.pmspace {
	float: right;
	margin: -3px 5px; }

.pmspace_container {
	background: #fff;
	border: 1px solid #ccc;
	width: 100px;
	display: inline-block; }

.pmspace_used {
	display: inline-block;
	color: #fff;
	margin: -1px; }

.pmspace_used.low {
	border: 1px solid #0c5a01;
	background: #167203; }

.pmspace_used.medium {
	background: #ff862b;
	border: 1px solid #d7611e; }

.pmspace_used.high {
	background: #e73c3c;
	border: 1px solid #c00; }

.pmspace_unused { 
	display: inline-block; }

.pmspace_text {
	padding: 1px 5px;
	display: inline-block; }

.bdbottom { border-bottom: 1px dashed #eee; }

And here is the result:
[attachment=42300]

I would appreciate any help...

In showthread.css you have to change:

ul.thread_tools li:before {
	font-family: Font Awesome 5 Free;
	display: inline-block;
	padding: 0px 0px 2px 2px;
	margin-bottom: 2px;
}

into:

ul.thread_tools li:before {
	font-family: "Font Awesome 5 Free";
	display:inline-block;
	padding: 0px 0px 2px 2px;
	margin-bottom: 2px;
	font-weight: 900;
}

(2019-11-07, 10:39 PM)SvePu Wrote: [ -> ]In showthread.css you have to change:

ul.thread_tools li:before {
	font-family: Font Awesome 5 Free;
	display: inline-block;
	padding: 0px 0px 2px 2px;
	margin-bottom: 2px;
}

into:

ul.thread_tools li:before {
	font-family: "Font Awesome 5 Free";
	display:inline-block;
	padding: 0px 0px 2px 2px;
	margin-bottom: 2px;
	font-weight: 900;
}

Nice!  That worked SvePu!!  I forget the quotes!  It usually ends up being something simple!  

Now one last area!  usercp.css!!  The quotes are thee but it isn't working on the front end!

Replace content of usercp.css with:

.usercp_nav_item { display: block; padding: 1px; } 

.usercp_nav_composepm { background-position: 0 0; }
.usercp_nav_pmfolder { background-position: 0 -20px; }
.usercp_nav_sub_pmfolder { padding-left: 20px; }
.usercp_nav_sub_pmfolder i:before {color: #d98b3a;font-weight: 900;}
.usercp_nav_trash_pmfolder { padding-left: 21px; }
.usercp_nav_trash_pmfolder i:before {color: #777;font-weight: 900;}
.usercp_nav_email { padding-left: 18px; }
.usercp_nav_password { padding-left: 18px; }
.usercp_nav_username { padding-left: 18px; margin-top: 4px; }
.usercp_nav_editsig { padding-left: 7px; }
.usercp_nav_avatar { padding-left: 7px; margin-top: 7px;  }

.usercp_notepad { width: 99%; }

.usercp_container {
	margin: 5px;
	padding: 8px;
	border:1px solid #ccc; }

.pmspace {
	float: right;
	margin: -3px 5px; }

.pmspace_container {
	background: #fff;
	border: 1px solid #ccc;
	width: 100px;
	display: inline-block; }

.pmspace_used {
	display: inline-block;
	color: #fff;
	margin: -1px; }

.pmspace_used.low {
	border: 1px solid #0c5a01;
	background: #167203; }

.pmspace_used.medium {
	background: #ff862b;
	border: 1px solid #d7611e; }

.pmspace_used.high {
	background: #e73c3c;
	border: 1px solid #c00; }

.pmspace_unused { 
	display: inline-block; }

.pmspace_text {
	padding: 1px 5px;
	display: inline-block; }

.bdbottom { border-bottom: 1px dashed #eee; }

(2019-11-08, 12:12 PM)SvePu Wrote: [ -> ]Replace content of usercp.css with:

.usercp_nav_item { display: block; padding: 1px; } 

.usercp_nav_composepm { background-position: 0 0; }
.usercp_nav_pmfolder { background-position: 0 -20px; }
.usercp_nav_sub_pmfolder { padding-left: 20px; }
.usercp_nav_sub_pmfolder i:before {color: #d98b3a;font-weight: 900;}
.usercp_nav_trash_pmfolder { padding-left: 21px; }
.usercp_nav_trash_pmfolder i:before {color: #777;font-weight: 900;}
.usercp_nav_email { padding-left: 18px; }
.usercp_nav_password { padding-left: 18px; }
.usercp_nav_username { padding-left: 18px; margin-top: 4px; }
.usercp_nav_editsig { padding-left: 7px; }
.usercp_nav_avatar { padding-left: 7px; margin-top: 7px;  }

.usercp_notepad { width: 99%; }

.usercp_container {
	margin: 5px;
	padding: 8px;
	border:1px solid #ccc; }

.pmspace {
	float: right;
	margin: -3px 5px; }

.pmspace_container {
	background: #fff;
	border: 1px solid #ccc;
	width: 100px;
	display: inline-block; }

.pmspace_used {
	display: inline-block;
	color: #fff;
	margin: -1px; }

.pmspace_used.low {
	border: 1px solid #0c5a01;
	background: #167203; }

.pmspace_used.medium {
	background: #ff862b;
	border: 1px solid #d7611e; }

.pmspace_used.high {
	background: #e73c3c;
	border: 1px solid #c00; }

.pmspace_unused { 
	display: inline-block; }

.pmspace_text {
	padding: 1px 5px;
	display: inline-block; }

.bdbottom { border-bottom: 1px dashed #eee; }

I had to refresh twice but it worked perfectly!!  Thank you once again!!  

You're welcome!

Please also change in theme template footer:

<div class="ft-col-item-icon"><i class="fa fa-paypal" aria-hidden="true"></i></div>

into

<div class="ft-col-item-icon"><i class="fab fa-paypal" aria-hidden="true"></i></div>

(2019-11-08, 12:23 PM)SvePu Wrote: [ -> ]You're welcome!

Please also change in theme template footer:

<div class="ft-col-item-icon"><i class="fa fa-paypal" aria-hidden="true"></i></div>

into

<div class="ft-col-item-icon"><i class="fab fa-paypal" aria-hidden="true"></i></div>

Missed that one!  Good eye...thanks again!!