Replace Default Icons w/ Font Glyphs

[Elli]

Replace Default Icons w/ Font Glyphs

Preview

This is a script + CSS combo that will replace some of the default ProBoards icons with glyphs from an icon font called Font Awesome. The benefit to using an icon font over images is that, just like regular text, these icons can be easily customized in size, color, and anything else that you can do with text using CSS. That means no uploading a new image every time you want to change small details.

1. Go to Admin > Themes > Layout Templates > Forum Wrapper
2. Find the closing </body> tag
3. Create a new line directly above it
4. Paste the following to the new line you just created:
   
   <!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">

<script>
$(function() {
   // Replace default icons with Font Awesome glyphs
   (function replaceDefaultIcons() {

       // Board on/off icons
       $('.board.item.new > td.icon > img').replaceWith('<i class="fas fa-folder" title="New Posts"></i>');
       $('.board.item.redirect > td.icon > img').replaceWith('<i class="fas fa-arrow-circle-right" title="Redirect"></i>');
       $('.board.item > td.icon > img').replaceWith('<i class="far fa-folder" title="No New Posts"></i>');

       // Shoutbox refresh icon
       $('.shoutbox_form .button').attr('title', 'Refresh');
       $('.shoutbox_form .button img').replaceWith('<i class="fas fa-sync-alt"></i>');

       // Legend on/off icons
       var $legendIcons = $('.legend .content td > img');

       $legendIcons.each(function() {
           var $this = $(this);

           if ($this.prop('alt') === 'New Posts') {

               // New Posts icon
               $this.replaceWith('<i class="fas fa-folder" aria-hidden="true"></i>');

           } else if ($this.prop('alt') === 'No New Posts') {

               // No New Posts icon
               $this.replaceWith('<i class="far fa-folder" aria-hidden="true"></i>');

           }
       });

       // Info Center icons
       var $infoIcons = $('.stats .content td.icon > img');

       $infoIcons.each(function() {
           var $this = $(this);

           if ($this.prop('alt') === 'Board Statistics') {

               // Threads and Posts icon
               $this.replaceWith('<i class="fas fa-info-circle" aria-hidden="true"></i>');

           } else if ($this.prop('alt') === 'Members') {

               // Members icon
               $this.replaceWith('<i class="fas fa-users" aria-hidden="true"></i>');

           } else if ($this.prop('alt') === 'Members Online') {

               // Users Online icon
               $this.replaceWith('<i class="fas fa-user-circle" aria-hidden="true"></i>');

           } else if ($this.prop('alt') === '24 Hours') {

               // Users Online in the Last 24 Hours icon
               $this.replaceWith('<i class="fas fa-clock" aria-hidden="true"></i>');

           }
       });

       // Icons that need to be updated on afterSearch
       function paginateIcons() {

           // Post/Message interaction icons
           $('.button .status').parent().attr('title', 'Options');
           $('.button .status > img').replaceWith('<i class="fas fa-cog" aria-hidden="true"></i>');
           $('.ui-search .search-filters-button').attr('title', 'Search');
           $('.ui-search .search-filters-button .icon > img').replaceWith('<i class="fas fa-search" aria-hidden="true"></i>');

           // Like icon
           function replaceLikeButton() {
               var $likeButtonImg = $('a.likes-button');

               $likeButtonImg.each(function() {
                   var $this = $(this);

                   if ($this.hasClass('liked')) {
                       $this.attr('title', 'Unlike');
                       $this.children('img').replaceWith('<i class="fas fa-heart" aria-hidden="true"></i>');
                   } else {
                       $this.attr('title', 'Like');
                       $this.children('img').replaceWith('<i class="far fa-heart" aria-hidden="true"></i>');
                   }
               });
           }

           function updateLikeButton() {
               var $this = $(this);

               if ($this.hasClass('liked')) {
                   $this.attr('title', 'Like');
                   $this.children('i').removeClass('fas').addClass('far');
               } else {
                   $this.attr('title', 'Unlike');
                   $this.children('i').removeClass('far').addClass('fas');
               }
           }

           replaceLikeButton();
           $('a.likes-button').on('click', updateLikeButton);

           // Thread/Conversation icons
           $('.thread > .icon > img').replaceWith('<i class="far fa-comments" title="Thread"></i>');
           $('.thread.sticky > .icon > i').replaceWith('<i class="far fa-sticky-note" title="Stickied Thread"></i>');
           $('.thread.announcement > .icon > i').replaceWith('<i class="fas fa-bullhorn" title="Announcement"></i>');
           $('.conversations .item > .icon > img').replaceWith('<i class="far fa-envelope" title="Message"></i>');
           $('.conversations .item.new > .icon > i').replaceWith('<i class="fas fa-envelope" title="New Message"></i>');

           // Thread status icons
           var lockIcon = '<i class="fas fa-lock"></i>';
           var bookmarkIcon = '<i class="fas fa-bookmark"></i>';
           var pollIcon = '<i class="fas fa-chart-bar"></i>';
           var fallingIcon = '<i class="fas fa-anchor"></i>';

           function replaceThreadIcons(oldIcon, newIcon, title) {
               $(oldIcon).each(function() {
                   var $this = $(this);

                   if (!$this.find('i').length) {
                       $this.attr('title', title);
                       $this.append(newIcon);
                       $this.find('img').remove();
                   }
               });
           }

           replaceThreadIcons('.lock_icon', lockIcon, 'Locked');
           replaceThreadIcons('.bookmark_icon', bookmarkIcon, 'Bookmarked');
           replaceThreadIcons('.poll_icon', pollIcon, 'Poll');
           replaceThreadIcons('.falling_icon', fallingIcon, 'This thread is falling');

           // Checkmark icon
           var $checkContainer = $('.ui-poll .results tr td .select-box');

           $checkContainer.each(function() {
               var $this = $(this);

               if (!$this.find('i').length) {
                   $this.append('<i class="fas fa-check" aria-hidden="true"></i>');
                   $this.children('img').remove();
               }
           });
       }

       paginateIcons();
       pb.events.on('afterSearch', paginateIcons);
   })();
});
</script>
   
5. Click Save Changes
6. Now go to Admin > Themes > Advanced Styles & CSS
7. Click the Style Sheet tab
8. Scroll to the bottom of your stylesheet and create a new line
9. Paste the following on the new line you just created:
   
   /* ======================================================
* Font Awesome Icons - 5.11.2
*
* https://fontawesome.com/
* ====================================================== */

@fa_board_icon_color: @buttons_text_color;
@fa_board_new_icon_color: @buttons_text_color;
@fa_board_redirect_icon_color: @buttons_text_color;
@fa_shoutbox_refresh_icon_color: @buttons_text_color;
@fa_info_stats_icon_color: @buttons_text_color;
@fa_info_members_icon_color: @buttons_text_color;
@fa_info_online_icon_color: @buttons_text_color;
@fa_info_24hrs_icon_color: @buttons_text_color;
@fa_settings_icon_color: @buttons_text_color;
@fa_search_icon_color: @buttons_text_color;
@fa_like_icon_color: @buttons_text_color;
@fa_like_icon_liked_color: #e81c4f;
@fa_thread_icon_color: @buttons_text_color;
@fa_thread_announcement_icon_color: @buttons_text_color;
@fa_thread_sticky_icon_color: @buttons_text_color;
@fa_lock_icon_color: @buttons_text_color;
@fa_poll_icon_color: @buttons_text_color;
@fa_bookmark_icon_color: @buttons_text_color;
@fa_falling_icon_color: @buttons_text_color;
@fa_message_icon_color: @buttons_text_color;
@fa_message_new_icon_color: @buttons_text_color;
@fa_checkmark_icon_color: #19cf86;

/* --- Board --- */

.board .icon > .fas.fa-arrow-circle-right { font-size: 16px; color: @fa_board_redirect_icon_color; }
.board .icon > .fas.fa-folder { font-size: 16px; color: @fa_board_new_icon_color; }
.board .icon > .far.fa-folder { font-size: 16px; color: @fa_board_icon_color; }

/* --- Shoutbox --- */

.shoutbox_refresh_button .fas.fa-sync-alt { font-size: 14px; color: @fa_shoutbox_refresh_icon_color; }

/* --- Info Center --- */

.stats .icon > .fas.fa-info-circle { font-size: 16px; color: @fa_info_stats_icon_color; }
.stats .icon > .fas.fa-users { font-size: 16px; color: @fa_info_members_icon_color; }
.stats .icon > .fas.fa-user-circle { font-size: 16px; color: @fa_info_online_icon_color; }
.stats .icon > .fas.fa-clock { font-size: 16px; color: @fa_info_24hrs_icon_color; }

/* --- Posts/Messages --- */

.button .status { padding: 0 7px; font-size: 14px; color: @fa_settings_icon_color; }
.button .icon { padding: 3px 2px 1px; }
.search-filters-button .icon > .fas.fa-search { padding: 1px 0; font-size: 14px; color: @fa_search_icon_color; }

.posts .post .content-head .controls a.likes-button { padding: 2px 8px; font-size: 14px; color: @fa_like_icon_color; }
.posts .post .content-head .controls a.likes-button.liked { color: @fa_like_icon_liked_color; }

/* --- Threads/Conversations --- */

.thread .icon > .far.fa-comments { font-size: 18px; color: @fa_thread_icon_color; }
.thread.announcement .icon > .fas.fa-bullhorn { font-size: 16px; color: @fa_thread_announcement_icon_color; }
.thread.sticky .icon > .far.fa-sticky-note { font-size: 17px; color: @fa_thread_sticky_icon_color; }

.conversation .icon > .far.fa-envelope { font-size: 16px; color: @fa_message_icon_color; }
.conversation.new .icon > .fas.fa-envelope { font-size: 16px; color: @fa_message_new_icon_color; }

/* --- Status --- */

.threads .control-icons i { padding-right: 5px; }
.lock_icon { font-size: 15px; color: @fa_lock_icon_color; }
.poll_icon { font-size: 16px; color: @fa_poll_icon_color; }
.bookmark_icon { font-size: 14px; color: @fa_bookmark_icon_color; }
.falling_icon { font-size: 14px; color: @fa_falling_icon_color; }

/* --- Checkmark --- */

.ui-poll .results tr td .select-box i { padding: 2px; color: @fa_checkmark_icon_color; visibility: hidden; display: block; }
.ui-poll .results tr.ui-selected td .select-box i { visibility: visible; }
   
10. Click Save Changes