Menu
Can two versions of font awesome co-exist?
We have V3.2 installed in our development environments. We would also like to install V4.3 in the same environments. Can two versions of co-exist? Would it cause any issues?
956
fas - solid icons are usually filled with transparent outlines. far regular and fal light are similar. These icons are different than fas solid because they are mostly outlines and differ only in outline width. fal light icons have thinner outline compared to far regular.
Backward Compatibility When Hosting YourselfWe've included files to help make Font Awesome 6 easily backward compatible with older versions. Learn how you can easily get your Web Fonts or SVG project using v6 icons without touching a single <i> element or pseudo-element CSS rule.
It's not backwards compatible.
It is possible in some to run 2 different versions side by side.
For example, if the CSS file for version 5.0.13 is loaded first, and then the CSS file for version 4.7.0 loaded next, then all the icons using the fa- prefix in v4.7 will continue to work as originally intended, but with additional icons being made available from v5 using the fas- prefix.
<html><head>
...
<!-- FontAwesome, used in accordance with MIT License -->
<link rel="stylesheet" type="text/css" media="all"
href="/lib/font-awesome-5.0.13/web-fonts-with-css/css/fontawesome-all.min.css" />
<link rel="stylesheet" type="text/css" media="all"
href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" />
...
</head><body>
...
<span class="fa fa-trash"><span><!-- became trash-alt in v5 -->
<span class="fa fa-pencil"><span><!-- became pencil-alt in v5 -->
<span class="fas fa-truck-moving"></span><!-- not available in v4.7 -->
...
</body></html>
Whilst this is perhaps not recommended in terms of performance or best practice it does technically work, and may be useful for larger projects during a transitional period when updating code from supporting FontAwesome v4 to v5.
I haven't tried this with versions 3 and 4 side by side, however the above method may work in the same way.
72
Well font awesome is composed of css stylesheet and some fonts files. And we can have any stylesheets included in a webpage, but the problem is when we have two objects with the same class name or id , one of them will overwrite the other.
Example:
Having these two elements in two seperate style sheets :
.element{
position : relative;
}
And :
.element{
position : absolute;
}
For the tag having the element class, it'll be positioned "relatively" or "absolutely" , not the two of them at the same time.
And this depends on the position of the file when including it in the web page.
So for the Font Awesome, the fa class for example in one of the files will be overwritten with the fa class in the other one.
So if there have been some changes on this class in the newer version (in the properties), it'll overwrite the same properties found in the old class, or it'll be overwritten by the old one (always talking about the same properties found).
And here's an example to make it even more clear :
.element{
position : absolute;
display : block;
}
This is the old one, and this is the new one:
.element{
position: relative;
margin : auto;
}
So the position property will be overwritten, but neither of the margin or the display property will be. So they'll work together at the same time.
Inspect the image in this fiddle and see how the repeated property being overwritten.And also try to change the order of the image class in the css, and see how the image will be hidden because display:none; overwrite display:block; .
Note : I will only share this thought with you , but I don't know if this is really going to be the same with the two separate files thing:
So as you can see, the last property ,gotten by the processor or whatever reads these properties, overwrites the first one. I know this is obvious for you as well, but I just wanted to share it with you people.
I hope what I wrote here is helpful and clear for you.
20
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
