Zendesk: Alert Notification with Promoted Articles

document head.html

//Link to Font Awesome for the icon
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

header.html

//Top of your header
<div class="notification notification-error">
    <div class="notification-inner">
      <span id="promoted-alert"></span>
       <a href="#" class="notification-dismiss" data-notification-dismiss=""></a>
</div>
</div>

zendesk.css

.notification {
  display:none;
}

.notification-dismiss {
  float:right
}

.fa {
  font-size: 18px;
  color: red;
}
.notification a {
    color: #00A69C;
}

zendesk.js

 //Alert system with Promoted Articles (change the word Issue as it must exist in the Title)
 if ( $('.promoted-articles ul li a:contains("Issue")').length > 0 ){
 $('.notification').show();
      $('#promoted-alert').html(
          '<i class="fa fa-warning"></i> ' + 
          $('.promoted-articles ul li a:contains("Issue")').first().parent().html()
        );
	}
	//This solution uses Font Awesome so please ensure you have that in your Document Head