Menu
I have a conflict with font awesome when 2 different css versions are used. I am not trying to use 2 different version, but my plugin embeds one version and sometimes a wordpress website has another version.
I am interested in this particular example, why doesnt first icon display if they both have same :before content?
(I have noticed it works if fa5 is linked first in the page)
What would be the easiest solution to handle this?
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"/>
<i class="fa fa-facebook"></i>
<i class="fab fa-facebook-f"></i>https://jsfiddle.net/pfbx5865/1/
990
Install each in separate directories and name one fa4 and one fa5 (or whatever you want to call the directories so you can tell them apart). You cannot use the CDN for this to work. Pick which version of Font Awesome you want to edit. In my case, I was already using version 4, so I decided to edit version 5.
To stack multiple icons, use the fa-stack class on the parent HTML element of the 2 icons you want to stack. Then add the fa-stack-1x class for the regularly sized icon and add the fa-stack-2x class for the larger icon. fa-inverse can be added to the icon with the fa-stack-1x to help with a knock-out looking effect.
Backward Compatible by Default! If your project uses Version 5 icons, style names, or custom CSS rules with Font Awesome @font-face rules, your Kit will automatically update icons to use Version 6!
Setting a Consistent Icon Width If you prefer to work with icons that have a consistent width, adding fa-fw will render each icon using the same width.
It's possible to have both libraries in parallel, just keep in mind: The style sheet loaded the latter "wins". It makes more sense to load FA5 first and then let FA4 overwrite the FA4 classes. Then most icons are displayed as expected.
The snippet below illustrates how to use both libraries. Whenever a FA4 class is used, it's rendered FA4 style. Whenever a FA5 class is used, it's rendered FA5 style. If you load it the other way around (FA4 first), everything is rendered FA5 style and that doesn't work if you have FA4 icon definitions that are now in the FA5 brand subset (fab).
If you swap the loading of the libraries (load FA5 first), it works.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<label>Facebook à la 4.7</label>
<i class="fa fa-facebook"></i>
<br>
<label>Facebook à la 5</label>
<i class="fab fa-facebook"></i>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
