fontawesome 5 using multiple icons in css content

Question

I was wondering why I can't get multiple icons of font awesome 5 in css 'content' running. With font awesome 4 it works fine.

Basically this is working:

  .login::before {
font-family: "Font Awesome 5 Regular"; content: "\f005";

}

And this is not working:

  .login::before {
font-family: "Font Awesome 5 Regular"; content: "\f005\f005";

}

I created a fiddle so you can have a look. https://jsfiddle.net/tgzouajm/54/

Is it a bug, or am I missing something? Thank you so much!

Answer 1

You may need to use "fa-layers" or "fa-stack".

AFAIK "fa-layers" works only in JS version of Font Awesome 5.

check it out here: https://fontawesome.com/how-to-use/svg-with-js look for fa-layers in power transform