Font awesome 4 and 5 in same page

问题

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/

回答1:

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>

回答2:

Unfortunately I don't have good advice on how to make them work in parallel - it feels like a can of worms, I would try to avoid such situations. You are saying "my plugin" - does that mean you developed it? If I had control over the code and I knew it might be used in both environments, I would add a config-option to select FA4- or FA5-environment and would then create the appropriate tags.

WRT first icon not showing in your sample: you said that you noticed the reverse effect if you loaded scripts in reverse order. And there lies your answer already: both .css-files have different definitions for the .fa-class. I guess the one which ruins your sample is this (from https://use.fontawesome.com/releases/v5.0.8/css/all.css:

.fa,.far,.fas{
    font-family: Font Awesome\ 5 Free;
}

as opposed to this (fromFA4):

.fa{
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

回答3:

You can actually make them work together, however, you will have to edit the CSS for one of them and give every icon a new non-conflicting CSS name.

Step 1: Install both libraries locally.

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.

Step 2: Edit ONE version of Font Awesome

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.

Change every instance of .fa to .fa5 in the CSS... EXCEPT for the font file names.

Example:

.fa-xs {
  font-size: .75em; }

becomes

.fa5-xs {
  font-size: .75em; }

Example 2:

.fa,
.fas,
.far,
.fal,
.fad,
.fab {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1; }

becomes

.fa5,
.fas,
.far,
.fal,
.fad,
.fab {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1; }

WARNING: DO NOT CHANGE REFERENCES TO THE FONT FILES!

Leave these unchanged, even though they have fa in the name.

.fab {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

You have to reference the actual file name, and it does not matter what the name of the file is since they are in different directories.

Step 3: Add the CSS links to your head section

<head>
...
<link href="fa/css/font-awesome.css" rel="stylesheet"> <!-- load all FA4 styles --> 
<link href="fa5/css/all.css" rel="stylesheet"> <!-- load all FA5 styles --> 
...
</head>

Step 4: Call the Icons like Normal

One way of calling it looks like this:

<i class="fa fa-chart-bar-o"></i> <!-- Font Awesome 4 Version of Chart -->
<i class="fa5 fa5-chart-bar"></i> <!-- Font Awesome 5 Version of Chart -->
<i class="fab fa5-cc-discover"></i> <!-- Font Awesome 5 Brand Icon for Discover -->

Notice you have to use fab for the brand icons.

If you do it this way, you have no conflicts at all and can use the entire library for both sets.

来源：https://stackoverflow.com/questions/49467856/font-awesome-4-and-5-in-same-page

标签

icons

font-awesome