[BUG OR MY MISUNDERSTANDING ?] About font-family valued to 'Font Awesome 5 Solid' WHEN in method SVG with JS

[Atanacius]

FIRST: I do not know if it's me or a bug, but, it's the FIRST time I use Font Awesome v5, in SVG with JS !

SECOND: Well, thanks @davegandy and all team involved in Font Awesome since during those last years it was a very great tools for me, and in 2017, it is always a great tool for me ! No doubt it will lasts long time again for me !

THIRD: Well, the first reason I had to download and setup Font Awesome 5 is because.. ... I want stop from using WebFonts (powered by Font Awesome v4)... for my site ... ... and then ONLY using SVG with JS icons (powered by only Font Awesome v5).

I use Free version. I can think to purchase the PRO version, but not for this project, as it's pretty a WIP ! SO...

My Setup:

I use SVG with JS version.

So I uploaded only the folder 'svg-with-js' contained in the package ''fontawesome-free-5.0.1". So I then loaded all from my index.html (with 'defer' attribute).

As a result, it is perfectly loaded into my HTML page And.. when I look in source and trying to open link from loaded script: it open a new tab and then connect to my script, so it's the right location.

I tested then, a simple code icon: It works. It generate a SVG and comment the tag ! Great works!

Anyway... It seems not working in my :before and :after CSS class. For making things clear:

I have this setup in my Font Awesome v4 site version:

[in CSS]
/* loading FA v4 from its folder */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;

/* trying to use on */
strong:before {
  content: '\f104';
  font-family: 'FontAwesome'; /* refer to webFont so... */
}
[in HTML]
<strong class="some-css-class">SOME TEXT</strong>
<!-- as a result it generate correctly the WEBFONT icon once the page loaded for the :before pseudo-element) -->

I have this setup in my Font Awesome v5 SVG with JS site version:

[in CSS]
/* importing and loading FA FREE v5.0.1 from its folder */
@import '../fonts/fontawesome5/fa-svg-with-js.css';

/* trying to use on */
strong:before {
  content: '\f104';
  /*
      -- as saw in the fontawesome-all.js:
      --- var FONT_FAMILY_PATTERN = /Font Awesome 5 (Solid|Regular|Light|Brands)/;
      -- and
      --- var fontFamily = styles.getPropertyValue('font-family').match(FONT_FAMILY_PATTERN);

      -- I think it's like that we can use it in a pseudo-element...
      -- so... Valid/Invalid ? (as it's not a true webfont):
   */
  font-family: 'Font Awesome 5 Solid'; /* as saw in the Javascript line (look explanation above)  */
}
[in HTML]
<!-- In HEAD tag -->
<script src="../fonts/fontawesome5/fontawesome-all.js?" defer></script>

<strong class="some-css-class">SOME TEXT</strong>
<!-- as a result it display f104 instead of the correct Font Awesome 5 SVG with JS icon... for the :before pseudo-element -->

<i class="fas fa-x5 fa-angle-left"></i>
<strong class="some-css-class">SOME TEXT</strong>
<!-- 
as a result it generate correctly an SVG icon by creating its <svg> HTML tag .. 
and comment the <i> HTML tag..
once the page loaded for the inline <i> DOM element)
 -->

So.. What I forget? If I must include the webfont of Font Awesome v5, it will be useless since I only want use SVG from now!

Also.. please note as said.. first time here in using SVG icons instead webFonts !

Great tools as already said, thanks for future answers !

I need answers since documentation is not talking about that (or I miss that...)

[tagliala]

Hi @Atanacius I've answered in #11878 please post your whole comment there

I'm closing this as a duplicate