Appending a Font-Awesome icon to an H1 element using JQuery

I am trying to dynamically append an FA icon to an <h1> tag using JQuery. The icon does get appended; however, it doesn't render on display. My JQuery snippet is a ridiculously simple and straightforward one:

function pronounce() {  
  $('h1.source-text').append('<i class="icon-volume-up pronounce"></i>');
};

The above function is called once a certain condition (as outlined in another script) checks out. The script is not wrong because I can see the appended FA icon in my Web Inspector:

What could be going on here?

FontsAwesome uses the following syntax:

<i class="fa fa-volume-up"></i>

Source: http://fortawesome.github.io/Font-Awesome/icon/volume-up/