Script doesn't apply image changes

I found this theme made by Matti: https://fmskins.forumotion.com/t21-release-phpbb3-elegant-theme
I applied all that he said in the post to apply and for some reason, the images are not being replaced by icons.
https://testingaca.forumotion.me/

This is the mentioned script:

Code:

$(function() {
  $('.pmlist dl[style*="https://2img.net/i/fa/prosilver/forum_read.gif"]').find('.forum-icon').append('<span class="nodeIcon"><i class="fa fa-comments"></i></span>');
});
$(function() {
  $('.forabg dl[style*="https://2img.net/i/fa/prosilver/forum_read.gif"]').find('.dterm ').append('<span class="nodeIcon"><i class="fa fa-comments"></i></span>');
});
$(function() {
  $('.forabg dl[style*="https://2img.net/i/fa/prosilver/forum_unread.gif"]').find('.dterm ').append('<span class="nodeIcon new"><i class="fa fa-comments"></i></span>');
});


$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/topic_read.gif"]').find('.dterm ').append('<span class="nodeIcon_t"><i class="fa fa-comments"></i></span>');
});
$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/topic_unread.gif"]').find('.dterm ').append('<span class="nodeIcon_t new"><i class="fa fa-comments"></i></span>');
});

$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/sticky_read.gif"]').find('.dterm ').append('<span class="nodeIcon_t"><i class="fa fa-thumb-tack"></i></span>');
});
$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/sticky_unread.gif"]').find('.dterm ').append('<span class="nodeIcon_t new"><i class="fa fa-thumb-tack"></i></span>');
});

$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/announce_read.gif"]').find('.dterm ').append('<span class="nodeIcon_t"><i class="fa fa-bullhorn"></i></span>');
});
$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/announce_unread.gif"]').find('.dterm ').append('<span class="nodeIcon_t new"><i class="fa fa-bullhorn"></i></span>');
});

$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/modernbb/folder_global_announce.png"]').find('.dterm ').append('<span class="nodeIcon_t"><i class="fa fa-exclamation-circle"></i></span>');
});
$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/modernbb/folder_global_announce_new.png"]').find('.dterm ').append('<span class="nodeIcon_t new"><i class="fa fa-exclamation-circle"></i></span>');
});

$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/topic_read_locked.gif"]').find('.dterm ').append('<span class="nodeIcon_t"><i class="fa fa-lock"></i></span>');
});
$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/topic_unread_locked.gif"]').find('.dterm ').append('<span class="nodeIcon_t lock"><i class="fa fa-lock"></i></span>');
});


$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/topic_read_hot.gif"]').find('.dterm ').append('<span class="nodeIcon_t"><i class="fa fa-star"></i></span>');
});
$(function() {
  $('.forumbg dl[style*="https://2img.net/i/fa/prosilver/topic_unread_hot.gif"]').find('.dterm ').append('<span class="nodeIcon_t hotnew"><i class="fa fa-star"></i></span>');
});






$(function() {
  $('.buttons img[src="https://2img.net/i/fa/prosilver/button_topic_new_en.png"]').replaceWith('<div class="new-topic"><i class="fa fa-pencil"></i> New Topic</div>');
});

$(function() {
  $('.buttons img[src="https://2img.net/i/fa/prosilver/button_topic_reply_en.png"]').replaceWith('<div class="new-reply"><i class="fa fa-reply"></i> Post Reply</div>');
});

$(function() {
  $('.buttons img[src="https://2img.net/i/fa/prosilver/button_topic_locked_en.png"]').replaceWith('<div class="topic-locked"><i class="fa fa-lock"></i> Topic Locked</div>');
});



$(function(){
$('.pmlist dl').closest('dl.icon').addClass('forum-icon');});

Good morning!

Have you installed Font Awesome on your forum?
Link on tutorial: https://help.forumotion.com/t140086-how-to-install-and-use-font-awesome

I tried now, both in template and JS and it didn't work.

Pay attention to the overall_header template.

Code:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css.php?css=public%3Anormalize.css%2Cpublic%3Acore.less%2Cpublic%3Aapp.less&s=7&l=1&d=1553130860&k=828439bc2bdde8dc9eb4757ec3c4330f925ea8a8" />
  <link rel="stylesheet" href="/css.php?css=public%3Anode_list.less%2Cpublic%3Anotices.less%2Cpublic%3Ashare_controls.less%2Cpublic%3Athxpress_xf.less%2Cpublic%3Aextra.less&s=7&l=1&d=1553130860&k=1d3eaaf9e8f08100ee331da968faf00b6f969164" />

Matti installs bootstrap via cdn. This code installs an outdated version of bootstrap that is no longer supported.
This causes the browser to generate an error:

its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Your page markup is broken and therefore can't work out the jQuery code with the forum icons.

I can't help you more - I don't work with bootstrap and I don't install packages with cdn on projects.

Ah, too bad.

Since this is a code providing by Mati on his forum I suggest you open a thread there

This thread will be locked