APEX

I'm developing in APEX 5.0 in 12c with the universal theme. I like the new success message, but I'd like to change the checkmark icon to something else under some circumstances.

When I was using theme 25, the icon was an image and I was replacing the image like this:

function placeWarningImage(pImgPath) {

  var $warning = $(".success_warning")

  if ($warning.length) {

   var $img = $warning.parent().parent().children("img")

   $img.css('background-image', 'none');

   $img.attr("src", pImgPath + "alert_warning.gif");

  }

}

Now that I'm using the universal theme I need to do it differently. Here is the html that I am working with (taken from the standard page template):

<div class="t-Body-alert">

  <div class="t-Alert t-Alert--defaultIcons t-Alert--success t-Alert--horizontal t-Alert--page t-Alert--colorBG" id="t_Alert_Success" role="alert">

    <div class="t-Alert-wrap">

      <div class="t-Alert-icon">

        <span class="t-Icon"></span>

      </div>

      <div class="t-Alert-content">

        <div class="t-Alert-header">

          <h2 class="t-Alert-title">#SUCCESS_MESSAGE#</h2>

        </div>

      </div>

      <div class="t-Alert-buttons">

        <button class="t-Button t-Button--noUI t-Button--icon t-Button--closeAlert" type="button" title="#CLOSE_NOTIFICATION#"><span class="t-Icon icon-close"></span></button>

      </div>

    </div>

  </div>

</div>

Where sometimes #SUCCESS_MESSAGE# is a normal message and sometimes #SUCCESS_MESSAGE# is <div class="success_warning">Special message</div>

I looked in the console at <span class="t-Icon"> and found that the font was apex-5-icon-font. Great. I'd like to use the new apex fonts. I am already using fa fonts in my trees. I looked up the apex 5 fonts. I guessed that icon-check is probably the icon I am seeing now for success messages. I would like to conditionally change it to icon-irr-invalid-settings (an exclamation mark inside a triangle.) I tried adding and removing classes in jQuery:

var $warning = $(".success_warning");

if ($warning.length) {

  $(".t-Alert-icon span.t-Icon")

    .addClass("icon-irr-invalid-settings").removeClass("icon-check");

}

But nothing happened. I'm looking for another approach to try.