Using Font Awesome 5 icon in JS

Dev
1

I need some help here. I have read through all the threads regarding FA 5 and I am still not sure how to do this.

I want to use the FA icon as the link in an a tag within javascript. Here is how I would normally use the Twitter icon as the link, but it is not working:

if (userFields && userFields[userFieldId]) {
              const url = userFields[userFieldId];
              const link = "<a href='"+url+"' target='_blank'><i class="fab fa-twitter"></i></a>";
              return Ember.Object.create({ link, name: twitterUsernameField.get('name') });
            } else { ....

I am looking for a concrete example or the exact series of steps I need to take to get this to work.

Cheers

3

Something like this should works, but remember to add the new icon in the site setting svg icon

 const link = "<a href='"+url+"' target='_blank'><svg class="fa d-icon d-icon-ICON-NAME svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#ICON-NAME"></use></svg></a>";
5 Likes