Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,294,012
Community Members
 
Community Events
165
Community Groups

How do I replace the Statuspage default icons?

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?

2 answers

2 votes
Arumugam M Atlassian Team Mar 30, 2022

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

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.

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

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

@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 Atlassian Team Apr 26, 2022

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 

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>

 

Hi @Arumugam M ,

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

Thanks,


Sam

0 votes
Arumugam M Atlassian Team May 04, 2022

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

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 Atlassian Team May 05, 2022

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 

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>

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Published in Statuspage

New feature: Slack notifications for Statuspage

We're excited to announce the release of a long-requested feature on Statuspage. Now visitors to your status page can subscribe to get notified in Slack when you report an incident or maintenance. Th...

3,047 views 8 20
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you