使用JQuery将Font-Awesome图标附加到H1元素

Question

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?

Answer 1

FontsAwesome uses the following syntax:

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

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

Answer 2

If you're using this font-awesome I think the class for the <i> should be fa fa-volume-up so your entire <i> will become:

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

Find all the classes and icons here

Hope this helps!