help needed with a icon code

[ironflame]

hi all i am trying to implement fontawesome as icons and it isnt working ami i doing something wrong


code i am using :


#board-1 .icon{position: relative;}

#board-1:after{

content: "\f06d";

font-family: FontAwesome;

font-style: normal;

font-weight: normal;

text-decoration: inherit;

/*--adjust as necessary--*/

color: #000;

font-size: 18px;

padding-right: 0.5em;

position: absolute;

top: 10px;

}

[elli]

Yes, you're applying the icon to the board, not the board's icon. Use the selector #board-1 .icon:after. Be sure you're loading the FontAwesome files somewhere on your forum.

[ironflame]

elli i have a redirect board i used your advice and it didnt change anything

[ironflame]

sorry for double posting i have decided to use your fontawesome code is there a way to include the legend icons and the Information & Statistics icons in it

[elli]

Can you show me which icons you want to include with a screenshot? And I'll update the code for you.

[ironflame]

i can do most icons except the legend,info and redirect icons

here is a pic link to what i am meaning elli

ibb.co/k67cPb

[elli]

Thanks. Here's the code just for these icons. Follow the same instructions on the original thread to install. Remember to just change the class in the script if you want a different icon.

$(document).ready(function() {
  // Replace legend on/off icons with Font Awesome glyphs
  const $legendIcons = $('.legend .content td > img');

  // Loop through each icon in the legend
  $legendIcons.each(function() {
     if ($(this).prop('alt') === 'New Posts') {
        $(this).replaceWith('<i class="fa fa-folder"></i>');
     } else if ($(this).prop('alt') === 'No New Posts') {
        $(this).replaceWith('<i class="fa fa-folder-o"></i>');
     }
  });

  // Replace info center icons with Font Awesome glyphs
  const $infoIcons = $('.stats .content td.icon > img');

  // Loop through each icon in the info center
  $infoIcons.each(function() {
     if ($(this).prop('alt') === 'Board Statistics') {
        $(this).replaceWith('<i class="fa fa-info-circle"></i>');
     } else if ($(this).prop('alt') === 'Members') {
        $(this).replaceWith('<i class="fa fa-users"></i>');  
     } else if ($(this).prop('alt') === 'Members Online') {
        $(this).replaceWith('<i class="fa fa-user-circle"></i>');  
     } else if ($(this).prop('alt') === '24 Hours') {
        $(this).replaceWith('<i class="fa fa-clock-o"></i>');  
     }
  });
});

/* ======================================================
* FONT AWESOME ICONS
* ====================================================== */
/* http://fortawesome.github.io/Font-Awesome/ */

@font_awesome_legend_board_icon_color: @buttons_text_color;
@font_awesome_legend_board_new_icon_color: @buttons_text_color;
@font_awesome_info_stats_icon_color: @buttons_text_color;
@font_awesome_info_members_icon_color: @buttons_text_color;
@font_awesome_info_online_icon_color: @buttons_text_color;
@font_awesome_info_24hrs_icon_color: @buttons_text_color;

.legend .content td > .fa-folder { font-size: 16px; color: @font_awesome_legend_board_icon_color; }
.legend .content td > .fa-folder-o { font-size: 16px; color: @font_awesome_legend_board_new_icon_color; }
.stats .content td.icon > .fa-info-circle { font-size: 16px; color: @font_awesome_info_stats_icon_color; }
.stats .content td.icon > .fa-users { font-size: 16px; color: @font_awesome_info_members_icon_color; }
.stats .content td.icon > .fa-user-circle { font-size: 16px; color: @font_awesome_info_online_icon_color; }
.stats .content td.icon > .fa-clock-o { font-size: 16px; color: @font_awesome_info_24hrs_icon_color; }