Font-awesome: SVG with javascript css issue?

[KnoxVegas]

Seeking some help!

I may be in the wrong with after downloading and installing the new FA5 I LOVE IT, I'm using it on my site now but I want to be able to use it also in my style sheets. I'm using the SVG and Javascript, but when trying to add it into my stylesheet using the content: '\f1ad'; it does not pick this up, just gives it the broken square? Am I doing this wrong with the new version? Still calling just font-family: FontAwesome; so maybe that is the issue? Thoughts?

[PeterShaggyNoble]

You'll need the webfont if you want to be able to use FA5 like that.

[KnoxVegas]

Sounds good, will you be able to use both webfont and the svg's or is it best to use one or the other?

[PeterShaggyNoble]

I haven't tested myself but, other than the overhead of loading the SVG framework and the font files (and related CSS, if you use it), I don't see that there should be any problems using both. Maybe consider subsetting and only serving up the font formats you know your audience need to reduce the load times a bit.

[KnoxVegas]

Hmm, I would rather use the SVG, but I will have to tag along with the old stuff for what I'm trying to do then. Thanks.

[ITZAP]

With FA5 SVG with Javascript or Webfonts with CSS, if you enter any Unicode into your CSS stylesheet, like ...
div.minicartbox::before {
font-family: "FontAwesome";
content: "\f07a";
}
This does work fine on desktop web browsers. BUT on Apple iPad iOS 11.2 Safari web browser ... NO.

And it appears Font-Family names have changed in FA5 ??
font-family: 'Font Awesome 5 Free';
font-family: 'Font Awesome 5 Brands';

There is no reference whatsoever on the FA5 website about that change, or Unicode support, or how to use Unicode in CSS.
Thus necessary to go back to using Font Awesome 4.7
Look forward to a future FA5 release.

[tagliala]

@ITZAP please take a look here: https://fontawesome.com/how-to-use/upgrading-from-4

There is a javascript file for painless upgrade.

However, in your specific use case I think the javascript will not work.

[Atanacius]

It's exactling what.. I asked in #11896 ..

(But I added some Javascript declarations in order making my understanding of the situation, look it if you want! It can perhaps help a bit to develop a workaround ?)

So it's a bug by feature then.
Anyway, what is the interest in using SVG with JS if we must include a WebFont for pseudo-element like :after/:before ?

Don't really understand ... Ahh.. didn't saw this message first... my browser was on "Add Issue" page since 3 days ago, I searched a way to making it working with pseudo-element but missed that "issue" ...

Hum..

And the link: https://fontawesome.com/how-to-use/upgrading-from-4 that @tagliala gave us.. is helpless.
I mean.. nothing about pseudo-element in that page :/
We need SVG with JS let us using as a webFont too (I mean, at least font-family subset).

[tagliala]

@Atanacius I'm going to close #11896, please report here your whole comment if it is the same issue.

And the link: https://fontawesome.com/how-to-use/upgrading-from-4 that @tagliala gave us.. is helpless.

As I said, "However, in your specific use case I think the javascript will not work."

At the moment, I don't know the answer.

I suppose, as @PeterShaggyNoble said, that you need the webfont version of font awesome if you need pseudo / after element manipulation in plain CSS 🤷‍♂️

Let's wait for feedback from someone in the Pro team

[Atanacius]

@tagliala I understand for the duplicate closing result.. (of my Issue)..
Anyway.. It had some informations that are not referenced in THIS issue..

So..
I'm going to copy/paste some stuff of my issue comment here.
Anyway, ANY people of the PRO TEAM must really look quickly at this incapacity (if this is that..) to load SVG with JS as font-family settings IN a pseudo-element like :before/:after.

As I said.. the issue is this one:

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)
 -->

@ Pro Team: More informations in CLOSED (as duplicate) ISSUE here: #11896 !

[Atanacius]

Ah....

So..
No Answer yet..

Hmm okay.. Didn't have much time to wait (project is running under a limited develop time: need to ship in time!)
..

Well..
As.. yet in Font Awesome v5, it have not support for
-> "Supporting as SVG with JS in pseudo-element"..

I have two solutions:

1. -- revert ( heartbreaker solution ... sadly :( ) to v4.. in WebFont old method. -- works good, but not so customizeable as SVG in Font Awesome v5 is !)
2. -- use simultaneously ( pretty.. stupid I think ) to v5.. in WebFont old method. -- but change THE WebFont-name declaration.. -- will for sure works good, but not so customizeable as SVG in Font Awesome v5 is !).

What guys think about that ?
_-1- REVERT_
or
_-2- SIMULTANEOUS USE (workaround...)_

[PeterShaggyNoble]

@Atanacius, you know there's a font option for FA5? https://fontawesome.com/get-started/web-fonts-with-css

[KnoxVegas]

Good catch @Atanacius this is where I was Sunday looking through the JavaScript files, still stuck on why we can't just use the new js SVG method with pseudo-elements. I would rather have this because 1. Icons are so smooth and look amazing on all devices vs. the web-fonts version. 2. SVG! Love SVG.

Reverting back to v4 is not an option for me, I'm always looking to be on the cutting edge, but there needs to be a built in fall back, looks like its there in the code for the fontawesome-all.js file, but still not being able to use the pseudo-element :before or :after is a huge issue I feel, this is something most web developers or designers are going to be looking for.

[Atanacius]

@tagliala I think we can label this as BUG since I found by experiments that a simple code produce weird result (bottom of my post).

@KnoxVegas yeah, that's the main issue here, the SVG is awesome as Font Awesome v5 is !
But.. I do not see any interest to revert back to old WebFonts if Font Awesome v5 can work with SVG as it is supposed do ! :)
I think it's a great bug since look below after my experimentations:

@ Pro Team:
Look, I created a visual codepen here:
https://codepen.io/anon/pen/mpbXgy

[robmadole]

Alright all, this is an undocumented secret feature that you've all just blown the lid wide open on! :wink:

One of the reasons that this is not documented is that we still have an outstanding bug that is waiting to be worked.

However, the simple example here illustrates usage:

https://codepen.io/fontawesome/pen/zEJaWo

Make sure that you set searchPseudoElements to true as described above.

@Atanacius what you are missing from your example is display: none; on the :before.

[KnoxVegas]

I have tried that with what I'm doing (The icon shows!!!!), but it seems to be showing up hidden behind the text that I want it to display just to the left of? It seems to show only for a few seconds possibly or it shows and then just gets hidden by the text in front. Even changing the left or right float or spacing does not seem to help move it, to get it to display on either side I'm having issues with it showing up? @robmadole

[robmadole]

@KnoxVegas would be happy to take a look at a URL

[KnoxVegas]

Wish I had a live example to show you from the site itself. I'm using wordpress divi theme and trying to display a svg icon before one of the counters.

`.ssnbuilding .percent-value:before {
display: none;
content: "\f1ad" !important;
font-family: "Font Awesome 5 Solid";
}

.ssnbuilding .svg-inline--fa {
font-size: 40px;
float: left;
left: 10%;
position: absolute;
top: 0;
}`

CSS Code above and this is what the html would look like.

Sorry I know its not a live site for you to access but about the best I can do, this would but what the page looks like with the building hidden behind the counter.

@robmadole

In the image above the first item the date 1983 should have a building icon infront of it, it shows for a very split second, but then seems to go hidden behind the main text.

[robmadole]

@KnoxVegas it doesn't look like the pseudo element is even being rendered. Normally you see a :before element in the DOM. Maybe check you CSS? Also, I didn't see an .ssnbuilding class anywhere but I probably just missed it. Have you double-checked to make sure that searchPseudoElements is true? By default this is disabled.

[Atanacius]

@robmadole :
"Atanacius what you are missing from your example is display: none; on the :before."

Ah.. Wish I had looked at GitHub page more sooner..
I finally implemented a fix for the current feature .. that finally didn't need a fix LOL.

Therefore, it is a great workaround I made.
Since I'm not needing anymore to add a display: none on ALL my pseudo-element.
(great for compatibility.)

For reference you can see there:
(note: I made it since nobody here answered... and I was needing FOR today xD)

https://codepen.io/anon/pen/wpwZPY

What do you think of that :p ?
-- look my css hacks/javascripts hacks.

And you talked about an 'outstanding bug', can I know which one please ?

I want add: it wasn't logic for me to adding display:none to a ::before/::after pseudo-element since we want display it..
BUT..
What I forgot was.. It add a node to the ::before element.. A SVG node.
So.. Displaying none the ::before will then let display only the SVG node ..

Ahhh... Why you don't answered more sooner xD !

[KnoxVegas]

@robmadole not sure if its a wordpress thing, added the class but when playing with the display: none; setting having it live and working it seems to hide the icon behind? But if i comment out using /display: none;/ then it shows back up but just as a square?

the shows the before if I comment out the display: none;

And here is the site

[robmadole]

@KnoxVegas and I are going to take this to a private message. Going to close and use that instead.

[Atanacius]

@robmadole : You have the issue to refer of which is the 'outstanding bug' ?
Perhaps my changes in order to being able to use SVG with JS in pseudo-elements will address that !?

@KnoxVegas you can perhaps try my 'bugfix' : https://codepen.io/anon/pen/wpwZPY ?
Perhaps it will fix it..

[robmadole]

@Atanacius https://github.com/FortAwesome/Font-Awesome-Pro/issues/839

[Atanacius]

@robmadole ok but it's private access lol.. Thanks aswell.

[the94air]

For anyone who is trying to achieve the same thing with vue-fontawesome:

// index.js

import Vue from 'vue';
import { dom, config, library } from '@fortawesome/fontawesome-svg-core';
import { faAngleRight } from '@fortawesome/free-solid-svg-icons';

config.searchPseudoElements = true;

dom.watch();

library.add(faAngleRight);

and for the styling:

// style.scss

.element::before {
    display: none;
    font-family: 'Font Awesome 5 Solid';
    content: "\f105";
}

[flofleche]

Totally do the trick ! Thanks a lot for this tip ;)