Is it possible for two different versions of Font Awesome to exist together?
In our development environments, we currently have V3.2 installed but we are interested in also installing V4.3. Can both versions coexist without causing any problems?
Is it possible for two different versions of Font Awesome to exist together?
In our development environments, we currently have V3.2 installed but we are interested in also installing V4.3. Can both versions coexist without causing any problems?
In certain cases, it is feasible to operate two different versions concurrently.
As an instance, if the CSS file for version 5.0.13 is loaded initially, followed by the CSS file for version 4.7.0, then all icons utilizing the fa- prefix in v4.7 will function as intended, while also gaining access to additional icons from v5 using the fas- prefix.
<html><head>
...
<!-- FontAwesome, utilized under 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><!-- now trash-alt in v5 -->
<span class="fa fa-pencil"><span><!-- now pencil-alt in v5 -->
<span class="fas fa-truck-moving"></span><!-- not present in v4.7 -->
...
</body></html>
While not necessarily recommended from a performance or best practice standpoint, this method does technically function and could be beneficial for larger projects transitioning from FontAwesome v4 to v5.
Although I have not personally attempted this approach with versions 3 and 4 simultaneously, the described technique may yield similar results.
Font Awesome is made up of a CSS stylesheet and font files. When including multiple stylesheets in a webpage, conflicts can arise if two objects have the same class name or ID; one will override the other.
For example:
If we have these two elements in separate style sheets:
.element {
position: relative;
}
And:
.element {
position: absolute;
}
The element with the element class will be either positioned relatively or absolutely, not both simultaneously, depending on the order of inclusion in the web page.
In the case of Font Awesome, the fa class in one file may overwrite the fa class in another file. Changes in properties will be inherited from the newer version or overwritten by the old one for the same properties.
Consider this example to understand better:
.element {
position: absolute;
display: block;
}
This is the old version, while the new version is:
.element{
position: relative;
margin: auto;
}
The position property will be overwritten, but the margin and display properties will work together concurrently.
Check out the image in this JSFiddle link to see how properties are overwritten. Change the order of the image class in the CSS to observe how the image becomes hidden because display:none; overrides display:block;.
Note: The last property read by the processor overwrites the first one. This might also apply when dealing with separate files.
I hope this information is helpful and clear for you!
Can elements that do not have a language set or inherited, meaning they are in an unspecified ("unknown") language, be targeted? Facts The language of an HTML document or element can be specified using the HTML lang attribute, for example: <html lang=& ...
I'm currently working on a basic two-column layout: <div class = "parent"> <div class = "left-column"> </div> <div class = "right-column"> </div> </div> <div class = "footer"></div> The con ...
My goal is to style my button like this : desired look However, I'm unsure of the necessary steps to achieve this. Here is my HTML code : <div class="content" *ngIf="loading==false" > <div class="product" ...
Currently, I am seeking a method to merge two css selectors together in order to target specific elements. The selectors I am attempting to combine are ':not' and ':first-of-type'. Here is the code snippet that represents my current sit ...
My goal is to design a simple webpage with two full screen background colored divs. On top of these background divs, I want to add two smaller divs where I can input text and place a button underneath to randomize the words (refer to the attached screensho ...
Trying to access a scoped "keyframes" named move-left in JavaScript. How can I do this while keeping it scoped? Note that vue-loader will add a random hash to move-left, such as move-left-xxxxxxxxx. <template> <div :style="{animation: animati ...
The updated library now includes fixed headers within the chart itself, which is a great improvement. However, we feel that it only solves half of the issue at hand. Customizing the headers is still a challenge, so I implemented a separate row to display ...
Created a script to highlight linked text in another HTML page. <p>Click <span class="f1"><a href="#myModal" data-reveal-id="myModal">here</a>/span></p> <div class="leftspread"> <p class="table-caption"& ...
Currently, I am working with a DOMDocument and I am curious if there is a way to utilize CSS-like selectors to choose nodes similar to how it is done in jQuery. For instance, let's say I am analyzing an XML file and a portion of it appears as follows ...
Here's the challenge: I want to make the left div stretch to the height of the right div https://i.sstatic.net/R3MCY.png and here's the desired outcome https://i.sstatic.net/UAXWC.png Currently, I'm implementing this using bootstrap < ...
When trying to use the v-lazy-image plugin for my page banner with local image files, it does not seem to work. <v-lazy-image srcset="../../../assets/images/banners/Small-Banner.svg 320w, ../../../assets/images/banners/Big-Banner.svg 480w&quo ...
<footer> <div class="copyrights-left"> <p>© 2015. <a style="color: #fff;" href="index.html">Free Xbox Live Gold Membership and Free Xbox Live Gold Codes</a>. All rights reserved.</p></div> <div class="co ...
I have successfully implemented a code that allows for crossfading between images when the mouse hovers over them. Now, I am looking to modify the behavior so that the crossfade effect happens only once when the mouse passes over the image. In other words ...
In my root component, RootApp.jsx handles the component tree: import { Suspense } from 'react'; import { HashRouter as Router } from 'react-router-dom'; import { Provider } from 'react-redux'; import store from '@/redux/s ...
When working with my CSS sheet, I found that I needed to reset some Bootstrap 3 preset values in order to achieve my desired style. To do this, I started using utility classes like .m-b-0 which sets margin-bottom:0px. However, I encountered an issue with ...
Currently experimenting with jQuery to create a dynamic submenu. The goal is to have a sub menu appear when the main menu is clicked, and then disappear when an item in the sub menu is selected, revealing additional information within a div. Unfortunately, ...
I am looking to incorporate SCSS styles on the body by default, and then reapply them specifically to the P and LI tags (since I do not have complete control over the site and want to prevent plugins from interfering with my p's and li's). To ac ...
Having trouble with floating elements? Need to ensure that box 3 aligns under box 1 when resizing the browser window? Use this HTML template: <div class="box"> <p>box 1</p> <p>box 1</p> <p>box 1</p> & ...
My current transition block component is set up like this: <div v-if="!surveyResultIsReady" class="vh-md-40 position-relative" > <transition name="custom-classes-transition" enter-active-class="animated slideInRight" ...
I am struggling to incorporate twbs into my Laravel project. How can I remove this folder? https://i.sstatic.net/vaITB.jpg composer.json { "name": "laravel/laravel", "description": "The Laravel Framework.", "keywords": ["framework", "laravel ...