nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How do I replace the Statuspage default icons?

Tim Dolson_phtwps

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?

Accepted answers

All comments

Arumugam M_7z82kd

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_phtwps

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:

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_7z82kd

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_phtwps

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_7z82kd

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_7z82kd

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>