How do I replace the Statuspage default icons?

[Tim Dolson]

I understand the conversation here to get different icons:

https://community.atlassian.com/t5/Statuspage-questions/Can-font-icons-like-Fontawesome-be-used/qaq-p/1572052

But, how do I use those to replace, for example, the Statuspage default fa-check icon to the fa-circle-check icon for the status-green .icon-indicator?

[Arumugam M]

Good day @Tim Dolson!

I'm Arumugam from the Atlassian Statuspage Support team.

If you are using any third-party libraries such as Font Awesome, then you will need to update only the classes of those elements which are responsible for the icons. 

Or you can use custom Javascript to add such images on the fly.

For everyone's reference - our main documentation on how to use custom CSS and Javascript snippets to customise or manipulate the page can be found here.

Hope that helps - but let me know if you have any specific questions. 

Regards,

Arumugam

[Tim Dolson]

Hi @Arumugam M 

I failed to explain that I am a complete newbie to CSS, HTML, and know even less about Javascript. Your explanation of, "update only the classes of those elements which are responsible for the icons" is a bit over my head.

I have been able to link to the Font Awesome library and can display various icons with:

<i class="fa fa-check-circle" style="font-size:20px;color:green;"</i>
<i class="fa fa-minus-circle" style="font-size:20px;color:yellow;"</i>
<i class="fa fa-times-circle" style="font-size:20px;color:red;"</i>

However, as I'm sure you can tell, these are non-functional.  Where would I update the classes, in the Custom CSS or Custom footer HTML?  And, what would a sample statement look like? (My boss REALLY wants to use the check-circle instead of the check icon).

Thanks for any help you can provide.

[Arumugam M]

Hi @Tim Dolson,

Thank you for the elaboration.

Understand that you have already linked the Font Awesome library to display various icons and were able to display the icons on the header or footer with simple HTML elements.

Now that library is already linked, in order to customise or inject any icons into the page dynamically, you would need some programming knowledge in JavaScript to achieve what you are looking for.

Dynamically adding the icons to the webpage requires reading the HTML model first and you would need to append the icons at the beginning of the existing innerHTML element or at the end of the HTML element.

We would also suggest configuring the scripts on the footer so that it does not block any loading elements.

If you need any further help with customisation, you may reach out to our partners via the link below:
https://partnerdirectory.atlassian.com/

I hope this helps.

Thanks,
Arumugam

[Tim Dolson]

Hi @Arumugam M 

Thanks for doing that research.  Looking at the article its clear that I'll need to find an Javascript resource to make the change my boss would like.  :( But, thanks again.

Tim

[Birky_ Sam]

@Arumugam M Hello! I am assisting Tim and trying to troubleshoot and find a solution.

I've initially tried using the JS method document.querySelector() to dynamically update the icons. My initial question is where do i try to use something like querySelector in the manage Statuspage tool? I've pasted the below into the Custom CSS section to see if i could change anything.

document.querySelector('span.tool.icon-indicator.fa.fa-check.tooltipstered').style = "font-size:20px; color:green;";

 Any help or direction is greatly appreciated!

[Arumugam M]

Hi @Birky_ Sam , 

Good day! Hope you are doing well. 

Understand that you would like to know where to save the custom JavaScript function. 

You can save those in both Custom Header and Custom Footer sections of Statuspage. Make sure to wrap your JS methods between script tags.

For example:

<script type='text/javascript'>

//Your JS code here. 

</script>

You may find examples and more information here. 

Thanks, 

Arumugam 

[Birky_ Sam]

Thanks @Arumugam M !

So I've tried a few things here. I've tried leveraging the method querySelectorAll to find all HTML elements by their classes and then updating then updating them with the class from Font Awesome to change the icons. It doesn't seem to be working. Any help on this? I have 2 snippets of code I tried below. Thanks!

FYI: I tried putting this code within the HTML <body></body> block in the Custom Footer HTML.

<script type='text/javascript'>

$(function() {

let checks = document.querySelectorAll('span.tool.icon-indicator.fa.fa-check.tooltipstered');

for(var i = 0; i < checks.length; i++) {

checks[i].classList.remove('span.tool.icon-indicator.fa.fa-check.tooltipstered');

checks[i].classList.add('fa fa-check-circle');

checks[i].style = ('font-size: 20 px; color: green:');
}

});

</script>

and tried the following

<script type='text/javascript'>

$(function() {

let checks = document.querySelectorAll('span.tool.icon-indicator.fa.fa-check.tooltipstered');
checks.classList.remove('span.tool.icon-indicator.fa.fa-check.tooltipstered');
checks.classList.add('fa fa-check-circle');
checks.classList.style = 'font-size: 20 px; color: green:'

});

</script>

[Birky_ Sam]

Hi @Arumugam M ,

Hope you are doing well! Just wanted to follow up on the above. Any help? Appreciate it!

Thanks,

Sam

[Arumugam M]

Hi @Birky_ Sam ,

Sorry for not being able to get back to you sooner. 

While looking at the snippet you are using, it seems that there is a syntax error in the following line:

checks.classList.add('fa fa-check-circle');

When you are adding multiple classes, either you would need to add them one by one.

checks.classList.add('fa');
checks.classList.add('fa-check-circle');

Or you can add them on one go like:

checks.classList.add('fa', 'fa-check-circle'); 

I would also recommend checking the HTML element to which you are trying to add the icon. When you try to add the icon to an element which is hidden, it may not show up on the screen. 

Please also make sure that the JS code is executed after the DOM is loaded and not before that. 

I hope this helps. 

Thanks, 

Arumugam

[Birky_ Sam]

Thanks, @Arumugam M !

I made the updates to the class you suggested. Thanks! I looked into ensuring execution happens after DOMContentLoaded, and I found document.onload so it shouldn't execute until after. I tried the two snippets below:

<script type='text/javascript'>

$(document.onload = function() {

let checks = document.querySelectorAll('span.tool.icon-indicator.fa.fa-check.tooltipstered');

for(var i = 0; i < checks.length; i++) {

checks[i].classList.remove('span.tool.icon-indicator.fa.fa-check.tooltipstered');

checks[i].classList.add('fa', 'fa-check-circle');

checks[i].style = ('font-size: 20 px; color: green:');
}

});

</script>

and

<script type='text/javascript'>

$(document.onload = function() {

let checks = document.querySelectorAll('span.tool.icon-indicator.fa.fa-check.tooltipstered');
checks.classList.remove('span.tool.icon-indicator.fa.fa-check.tooltipstered');
checks.classList.add('fa', 'fa-check-circle');
checks.classList.style = 'font-size: 20 px; color: green:'

});

</script>

Also I tried an event listener for both snippets in place of "document.onload"

$(document.addEventListener("load", function() {...........

So with these changes, I am not seeing anything happen to the icon. This code is in the Custom Footer HTML. Thoughts?

As far as the element i am targeting being hidden... I don't believe the HTML elements are hidden as i see it when inspecting but also ran the following code on the element I'm targeting. Let me know if you have any thoughts on this.

<script type='text/javascript'>
function myFunction() {
var x = document.getElementById('span.tool.icon-indicator.fa.fa-check.tooltipstered');
if (window.getComputedStyle(x).visibility === "none") {
console.log("it is hidden");
}
}
</script>

Any further guidance would be much appreciated!

[Arumugam M]

Hi @Birky_ Sam ,

Good day!

It seems that you are selecting an element which is not visible on the DOM. 

I would recommend, testing this code on the Developer tools by manipulating your page manually to find the right HTML elements, where you want to display the icons. 

Once you have selected the correct element to display the icons, you can then go ahead and add the respective classes to it. 

I hope this helps. 

Regards, 

Arumugam 

[Birky_ Sam]

Hi @Arumugam M ,

Thanks for your help. We were able to figure out a solution. It seems as though the font awesome library(imported in Custom Footer HTML) was not available at the time the code was being executed. We are using setInterval to run the function. Thanks!

In Custom Footer HTML:

function updateOperationalIcons() {

var checks = document.querySelectorAll('span.tool.icon-indicator.fa.fa-check.tooltipstered');

for(var i = 0; i < checks.length; i++) {

checks[i].classList.remove('span.tool.icon-indicator.fa.fa-check.tooltipstered');

checks[i].classList.add('fa', 'fa-check-circle');

checks[i].style = ('font-size: 20px; color: green:');

}}

</script>