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

- 1 answer

Ad

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:

enter image description here

What could be going on here?

Ad

Answer

Ad

FontsAwesome uses the following syntax:

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

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

Ad
source: stackoverflow.com
Ad