Adding Icons to Task Buttons

App Development
1

I’d like to add an FA Icon to a Task Button. How can I do that?

2

Hey @andreas, I’ve got some JavaScript for you that should be useful. Just swap out the #x_element_page_xxx_x with the ID of your task buttons and update the FA icon you prefer. I used chat GPT to produce this, I tested it and it works.

var selector = '#x_element_page_xxx_x > div > div > button > span:nth-child(1)';
  
  function insertIcon() {
    var targetSpan = document.querySelector(selector);
    
    if (targetSpan) {
      // Check if the icon is already inserted
      if (!targetSpan.querySelector('i.fas.fa-clock')) {
        // Define the HTML string for the icon and a space
        var iconHTML = '<i class="fas fa-clock"></i> ';
        
        // Insert the icon HTML before the existing content
        targetSpan.insertAdjacentHTML('afterbegin', iconHTML);
        
        console.log('Icon inserted successfully using insertAdjacentHTML.');
      } else {
        console.log('Icon already exists.');
      }
    } else {
      console.warn('Element with selector "' + selector + '" not found.');
    }
  }
  
  // Initial attempt to insert the icon
  insertIcon();
  
  // Observe DOM changes in case the element is added later
  var observer = new MutationObserver(function(mutations, obs) {
    var targetSpan = document.querySelector(selector);
    if (targetSpan) {
      insertIcon();
      obs.disconnect();
    }
  });
  
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });

Cam @ SuiteUpstairs

1 Like