Solved: 5 Years, 3 Weeks ago Converting from Font Awesome 4 to 5
#1
Solved: 5 Years, 3 Weeks ago
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...
MyBB 1.8.38 (x3)
bladetalk.org, alpharomeo15.org & pazrt.com
Reply
#2
Solved: 5 Years, 3 Weeks ago
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;
}
Reply
#3
Solved: 5 Years, 3 Weeks ago
(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!
MyBB 1.8.38 (x3)
bladetalk.org, alpharomeo15.org & pazrt.com
Reply
#4
Solved: 5 Years, 3 Weeks ago
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; }
Reply
#5
Solved: 5 Years, 3 Weeks ago
(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!!   Big Grin
MyBB 1.8.38 (x3)
bladetalk.org, alpharomeo15.org & pazrt.com
Reply
#6
Solved: 5 Years, 3 Weeks ago
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>
Reply
#7
Solved: 5 Years, 3 Weeks ago
(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!!
MyBB 1.8.38 (x3)
bladetalk.org, alpharomeo15.org & pazrt.com
Reply


Forum Jump:


Users browsing this thread: 3 Guest(s)