Jump to the post that solved this thread.
Solved: 1 Year, 8 Months, 2 Weeks ago Change thread icons and icon legend
#1
Solved: 1 Year, 8 Months, 2 Weeks ago
I converted my forum to fontawesome hosted on my server but I had to go from fontawesome 4 to 5 so many icons changed.  I got most of them updated but where/how do you change the thread icons and the thread icon legend?  These are the little icons that indicate hot topic and new posts, etc...

I think it is in thread_status.css (Flatty Theme) but I am unsure how to update these unicode icons to inline class icons?

.thread_status { display: inline-block; width: 30px; } 
.thread_status:after { font-family: "FontAwesome"; content: "\f005"; font-size: 17px; color: #2c82c9; } 
[class*="hot"]:after { color: #fc6042; content: "\f06d"; padding-left: 1px; }
[class*="new"]:after { color: #a19c69; } 
[class*="lockfolder"]:after { color: #777; content: "\f023"; padding-left: 2px; }
.thread_status.dot_folder { background-position: 0 0;}
.thread_status.dot_hotfolder { background-position: 0 -20px; }
.thread_status.dot_hotlockfolder { background-position: 0 -40px; }
.thread_status.dot_lockfolder { background-position: 0 -60px; }
.thread_status.dot_newfolder { background-position: 0 -80px;}
.thread_status.dot_newhotfolder { background-position: 0 -100px;}
.thread_status.dot_newhotlockfolder { background-position: 0 -120px;}
.thread_status.dot_newlockfolder { background-position: 0 -140px;}



.thread_status.dot_folder:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #565656;
	content: "\f15c";
}		
	

I also need to change the icons in the USER CP NAV Messenger block as seen in the screen cap I attached...


Attached Files Thumbnail(s)
           
MyBB 1.8.22 (x4)
7173Mustangs.com, pa2a.org, pazrt.com & paguntalk.com
Reply
#2
Solved: 1 Year, 8 Months, 2 Weeks ago
Maybe you have to change the font-family to:
font-family: 'Font Awesome 5 Free'
Reply
#3
Solved: 1 Year, 8 Months, 2 Weeks ago
(2019-11-07, 01:44 PM)SvePu Wrote: Maybe you have to change the font-family to:
font-family: 'Font Awesome 5 Free'

I tried that and got the 3 of them to work...I can't figure out the others!


Attached Files Thumbnail(s)
   
MyBB 1.8.22 (x4)
7173Mustangs.com, pa2a.org, pazrt.com & paguntalk.com
Reply
#4
Solved: 1 Year, 8 Months, 2 Weeks ago
Try this in thread_status.css
.thread_status { display: inline-block; width: 30px; } 
.thread_status:after { font-family: "Font Awesome 5 Free"; content: "\f005"; font-size: 17px; color: #2c82c9; font-weight: 900;} 
[class*="hot"]:after { color: #fc6042; content: "\f06d"; padding-left: 1px; }
[class*="new"]:after { color: #a19c69; } 
[class*="lockfolder"]:after { color: #777; content: "\f023"; padding-left: 2px; }
.thread_status.dot_folder { background-position: 0 0;}
.thread_status.dot_hotfolder { background-position: 0 -20px; }
.thread_status.dot_hotlockfolder { background-position: 0 -40px; }
.thread_status.dot_lockfolder { background-position: 0 -60px; }
.thread_status.dot_newfolder { background-position: 0 -80px;}
.thread_status.dot_newhotfolder { background-position: 0 -100px;}
.thread_status.dot_newhotlockfolder { background-position: 0 -120px;}
.thread_status.dot_newlockfolder { background-position: 0 -140px;}



.thread_status.dot_folder:after {
    font-family: Font Awesome 5 Free;
    font-size: 14px;
    color: #565656;
	content: "\f15c";
	font-weight: 900;
}		
		
Reply
#5
Solved: 1 Year, 8 Months, 2 Weeks ago
That worked!!  Thank you so much!!  Big Grin

How about the folder icons in the messenger box in user cp nav?  I attached a screen cap. I can probably fix them but I cant find where they are at in the templates!


Attached Files Thumbnail(s)
   
MyBB 1.8.22 (x4)
7173Mustangs.com, pa2a.org, pazrt.com & paguntalk.com
Reply
#6
Solved: 1 Year, 8 Months, 2 Weeks ago
You have to edit the certain templates manually, because some Icon classes are obsolete.
Reply
#7
Solved: 1 Year, 8 Months, 2 Weeks ago
(2019-11-07, 03:10 PM)SvePu Wrote: You have to edit the certain templates manually, because some Icon classes are obsolete.

I can change them but I can't seem to get the unicode css to work with FontAwesome 5...here is the code for the show thread > thread tools.  I just cant seem to get it to work with the new FA 5  ( I did add font awesome 5 free in to the css but no luck)



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 here is my usercp.css file that I already added the FA5 tag line but I cant get this one to work for PM messenger sub folders (trash, sent, etc)

.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; }
MyBB 1.8.22 (x4)
7173Mustangs.com, pa2a.org, pazrt.com & paguntalk.com
Reply
#8
Solved: 1 Year, 8 Months, 2 Weeks ago
I'm also using a modified version of Flatty, but I don't use FontAwesome 5. I prefer the old version 4.7.

=> https://bastler-treffpunkt.de/
Reply
#9
Solved: 1 Year, 8 Months, 2 Weeks ago
(2019-11-07, 06:44 PM)SvePu Wrote: I'm also using a modified version of Flatty, but I don't use FontAwesome 5. I prefer the old version 4.7.

=> https://bastler-treffpunkt.de/

Looks pretty clean!  I should have stuck with 4.7 but I wanted to host FA locally and I could only find the kit for FA 5.  I am almost done converting but I need to get the PM folders and thread tools converted.
MyBB 1.8.22 (x4)
7173Mustangs.com, pa2a.org, pazrt.com & paguntalk.com
Reply
#10
Solved: 1 Year, 8 Months, 2 Weeks ago
Here you can get the official FA 4.7 version => https://fontawesome.com/v4.7.0/get-start...l-download
Reply
Jump to the post that solved this thread.


Forum Jump:


Users browsing this thread: 1 Guest(s)