search

icons8 / line-awesome

Replace Font Awesome with modern line icons
https://icons8.com/line-awesome
Other
1.25k stars 140 forks source link

.fa class not working after upgrade #33

Closed kyonkopa closed 4 years ago

kyonkopa commented 4 years ago

After upgrading to v1.3.0 I couldn't get fa fa- css to work i.e. icons don't unless you use la la-, I've tried using font-awesome-line-awesome/css/all.css stylesheet but it still doesn't work, is this the expected behavior?

fatawesome commented 4 years ago

As far as we know, there is no more fa- prefix in FontAwesome. It was replaced by style prefixes.

kyonkopa commented 4 years ago

Yes, but I mean fas far doesn't show line awesome icons anymore, unless las lar, it won't work. However it worked in the previous versions.

fatawesome commented 4 years ago

Are you sure you did everything correct? This snippet works for me.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/b238dc89ed.js" crossorigin="anonymous"></script>

    <!-- Font Awesome to Line Awesome CDN link -->
    <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css">

    <title>FA->LA test</title>
</head>
<body>
    <i class="fas fa-heart"></i>
</body>
</html>
kyonkopa commented 4 years ago

I've tested your code and it works. I'm using the downloadable version and it doesn't have font-awesome-line-awesome/css/all.min.css file, what it does have is css/line-awesome.css. I also have installed it via npm which has all.min.css but it still doesn't show line awesome icons, what it does show are the font awesome icons. However using that from the cdn works fine

fatawesome commented 4 years ago

Thanks for your answer! We will add FA -> LA files to the package soon.

kyonkopa commented 4 years ago

That´s great. Thanks

kyonkopa commented 4 years ago

@fatawesome Any update on this? Last time I checked it hasn't been added

NicoHood commented 3 years ago

I am still wondering where to get the mentioned css file or how to recompile it myself.

kyonkopa commented 3 years ago

If you really need it to work, try this.

  1. Import "font-awesome-line-awesome/css/all.min.css", pull from CDN if necessary, also available in npm package
  2. Place "fa-" prefixed fonts in css/webfonts, you can get these files from the line-awesome npm package
NicoHood commented 3 years ago

Alright, so I tried to dig into this issue once again.

To correctly use line-awesome as font-awesome 4 AND 5 drop-in you need to:

However this is very confusing because you must rename the files and the compatibility css is hosted an an URL you must know. Also I have no idea how to recreate the css file from source myself. I was able to get it running using the new fas syntax, but not using the old v4 fa syntax.

Maybe it would be nice, if you can provide a shim file, like font awesome:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/v4-shims.css">

It would be nice, if you could clarify this, how to compile those css files yourself, maybe even without renaming the font files (as it is missleading).

NicoHood commented 3 years ago

So I tried to recompile the scss from the download myself. It required a fix in order to use fas instead of las. I wanted to open a PR for that, but it seems the git here has no up to date versions!? Can you please upload all files here?

https://github.com/icons8/line-awesome/tree/master/dist/line-awesome/scss

The fix was to add to _core.scss

.#{$la-css-prefix-lar},
.#{$la-css-prefix-las},
.#{$la-css-prefix-lab} {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

Include variables first:

@import "mixins";
@import "variables";
@import "core";
@import "path";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered_pulled";
@import "rotated-flipped";
@import "stacked";
@import "icons";
@import "screen-reader";

And replace the following variables:

$la-css-prefix: fa;

$la-font-name-lar: 'Font Awesome 5 Pro' !default;
$la-css-prefix-lar: far !default;

$la-font-name-las: 'Font Awesome 5 Free' !default;
$la-css-prefix-las: fas !default;

$la-font-name-lab: 'Font Awesome 5 Brands' !default;
$la-css-prefix-lab: fab !default;

==> old v4 fa Syntax is still not working. Even with la it is not working and I have no idea how you generated the css file linked in my previous post

Edit: I was able to get old style fa fa-heart working. However fa fa-amazon (Brand icons) will not work with the old style anymore. this is due to the fact, that those icons have a different font weight and (for me) it is not worth to manually fix all those icons. It is also possible, that the renamed icons are not working anymore:

_path.scss

.#{$la-css-prefix}, .#{$la-css-prefix-las} {
  font-family: $la-font-name-las;
  font-weight: 900;
}

edit2: After adding the fontawesome v4 shim compatibility file, almost all icons are now working! Even old brand names or renamed icons do work now. The only thing that is broken, is css which specifies the old font family with a non existing character (for example half-stars).

NicoHood commented 3 years ago

I've upgraded my grav quark theme and published those changes to github. You can test with the following html. Note: I have not added line-awesome "v4" legacy support, only for Fontawesome 4, 5, and LineAwesome 1.3.0. So all la icons will not functions, but las, fas, fa will work.

v4fa <i class="fa fa-heart"></i>
v5fas <i class="fas fa-heart"></i>
v4la <i class="la la-heart"></i>
v5las <i class="las la-heart"></i>

v4fa <i class="fa fa-amazon"></i>
v5fas <i class="fab fa-amazon"></i>
v4la <i class="la la-amazon"></i>
v5las <i class="lab la-amazon"></i>

v4fa <i class="fa fa-star-o"></i>
v5far <i class="far fa-star"></i>
v5fas <i class="fas fa-star"></i>
v4la <i class="la la-star-o"></i>
v5lar <i class="lar la-star"></i>
v5fas <i class="las la-star"></i>

It is possible that the scss needs to be recompiled using npm i && npm run build (I did not yet add css files to the repo). https://github.com/NicoHood/grav-theme-quark/tree/magerquark