Converting from Font Awesome 4 to 5

[RocketFoot]

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:
   

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:
   

I would appreciate any help...

[SvePu]

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;
}

[RocketFoot]

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!

[SvePu]

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; }

[RocketFoot]

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!!  

[SvePu]

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>

[RocketFoot]

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!!