Jump to content
TheHost4U - Webmaster Resources
Sign in to follow this  
theboss

Replace Forum FontAwesome icons with your own

Recommended Posts

===================================================================================
How to replace Forum Read and Unread FontAwesome icon and use your own icon instead
===================================================================================

 

NOTE: YOU WILL NEED TO SIGN UP TO VIEW IMAGES BELOW

 

 

With start of IPB 4.x.x IPS have started to use FontAwesome icons.

 

Here we show you how to repace the forum icons and use your own

 

AdminCP >> Cutomization >> Themes >> Far right of theme name select the 'down arrow' and select manage resources

 

Click the Add Resources button near top of page

 

Make sure your settings are set as per image below (Custom folder is important, if not available then create it and use

it)

 

post-1-0-23373400-1446475233_thumb.jpg

 

Upload your forum icon image and click save

 

Find the image after page refreshes and copy the code (e.g. {resource="f_icon.png" app="core" location="custom"} )

 

Repeat upload image and copy code for every image (Only require one forum icon and one redirect icon)

 

Back to Themes and far right of theme name select the Edit HTML/CSS button >> CSS Tab

 

Find custom.css and add:

.ipsItemStatus.ipsItemStatus_large, .ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read {  background: transparent;  border-radius: 0;}

/*** THE ABOVE GETS RID OF THE BLUE CIRCLE ***/

 

Now add:

.ipsDataList_large .fa-comments::before {  content: url({resource="f_icon.png" app="core" location="custom"}); }.ipsDataList_large .fa-arrow-right::before {  content: url({resource="f_redirect.png" app="core" location="custom"});}

Replace above code between the  ( and ) with code you copied and saved for your images

 

NOTE: You do not need an icon for 'Read' and 'Unread' forums as it will use the icon you set for Unread (in the above

case f_icon.png) and uses an opacity setting to make it 'fade'

 

Save and should now show your forum icons when you refresh browser

 

post-1-0-13767500-1446475497_thumb.jpg

 

Please let us know if you found this useful

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...