0

In version 4 I would chain icons for a ratings graphic.

In version 5 we are required to configure Psuedo attributes to allow them to behave correctly but now the chained icons in content are no longer recognised by Font Awesome 5.

FontAwesomeConfig = { searchPseudoElements: true };

The code below won't display as svg.

.ratings::before{
  font-family: "Font Awesome 5 Solid";
  display: none;
}
.ratings-four-five::before{ content: "\f005 \f005 \f005 \f005 \f089";}

Is there a work around I'm missing (like preventing svg creation) or "best practice" approach to solve this?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Eli Peters
  • 406
  • 4
  • 10
  • I'm not real familiar with Font Awesome how you're using, it, but you definitely do not need the SVG version of a font right now. I love SVG, I love vectors, but the support isn't there yet, so you really only need a single WOFF file alone. – Jan Kyu Peblik Feb 18 '18 at 06:13
  • you need to use the CSS version and not the JS version which rely on SVG – Temani Afif Feb 18 '18 at 08:49
  • @TemaniAfif Not sure how this is a duplicate question, just a duplicate solution which is to roll back to the css version... which is just as much a fix as choosing to use icomoon over FA. – Eli Peters Feb 20 '18 at 09:21
  • In your question you said that content is no more recognized and this is due to the use of SVG ... then you asked how to solve this ? ... the only way is to get back the CSS version if you want to use content and font-family ... and it's a duplicate as the other question has the same issue ... but if the other question didn't provide a solution for you, you can edit your question to clarify your needs and tell that the other solution is not suitable, then i can reopen the question ;) – Temani Afif Feb 20 '18 at 09:25
  • @TemaniAfif I'm not disputing that your solution is the same for both questions (if you can call it a solution)... my position is that in my opinion the two problems differ enough not to be duplicate. – Eli Peters Feb 20 '18 at 13:31
  • the problems doesn't have to be exactly the same to be considered as duplicate, if it was the case we will never have any duplicate .... when two question deals with the same issue they are duplicates, you are having issue with font because content can no more be used due to the SVG version and it's the same for the other ...And if you don't agree with this [as i told you ] edit your question to clarify and to say that the other answer is not suitable for me and am looking for another solution and then i will reopen the question – Temani Afif Feb 20 '18 at 13:35
  • @TemaniAfif or I could just give an answer to the other question showing how to make that example work :) – Eli Peters Feb 20 '18 at 21:26
  • yes you can do this as this is how the community works ;) and i saw your answer and i will upvote because it usefu and provide another alternative to my answer ;) – Temani Afif Feb 20 '18 at 22:06
  • @TemamiAfif thanks for the upvote but my answer isn't an alternative... it is the answer. Your solution is a "work around". – Eli Peters Feb 20 '18 at 23:18
  • no i don't think it's a workaround :) simply because the OP is not aware about the change made within the V5 and he want to be able to use the old method like he found in the other posts .. and to do so he need to re-consider the CSS thing ... you answer provide another way to consider pseudo element with the new version. and don't forget that it rely on JS and some people may want to use the Pure CSS for some reasons. So both solutions are valid ;) – Temani Afif Feb 20 '18 at 23:35

0 Answers0