2

I found a working version example with Font awesome 4.4.

However, once I tried to update it with the later version, say https://use.fontawesome.com/releases/v5.7.0/css/all.css it doesn't work any more. I also checked the unicode e.g. this uncheckbox in the document has changed compare to the css code below?! https://fontawesome.com/icons/square?style=regular

To make myself more confused, the Font awesome document says "Updated: Version 5.10.2", I am not able to change to different version to check if checkbox icon has the same unicode. 

<!--Working if I use 4.4 provided in example-->
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <link href="style.css" rel="stylesheet" />
</head>

and 

/*NOT working any more tested under version 5.7*/
.custom-fa input[type="checkbox"] {position:absolute;left:-999px;}
.custom-fa input[type="checkbox"]:focus + span{color:#46c0ef;}
.custom-fa label{cursor: pointer;}
.custom-fa label input[type="checkbox"] + span:before { 
    font-family: FontAwesome;
    content: "\f096";  
    display: inline-block;
    font-weight: 400;
    font-style: normal;
    font-size: 1.4em;
    text-align:center;
    letter-spacing: 6px;
  }
.custom-fa label input[type="checkbox"]:checked + span:before { content: "\f046";letter-spacing: 3px; } /* checked icon */
.custom-fa label input[type="checkbox"]:indeterminate + span:before{content: "\f147";letter-spacing: 6px;}

Can someone please explain to me what is going on with different Font awesome versions and their unicodes?

How do I fix the code to work using the newer Font Awesome 5.7 or 5.10?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Tom
  • 15,781
  • 14
  • 69
  • 111
  • 1
    the font-family is `Font Awesome Free` – Temani Afif Jun 08 '20 at 08:29
  • 1
    and to fix the unicdes, you simply need to use the new one. the V5 is a complete new Version and everything has changed https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4#name-changes – Temani Afif Jun 08 '20 at 08:30
  • you can also consider the usage of the Kit that allow to handle the old icons (related: https://stackoverflow.com/a/59693798/8620333) – Temani Afif Jun 08 '20 at 08:36
  • No luck, I tried the example from 'upgrading-from-version-4' link. Following the example, I opened a clean project and did `` and copied the example css `.calendar::before {font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f133"; }` However, it turned out to be a broken icon. What am I missing, any Idea? – Tom Jun 08 '20 at 09:18
  • 1
    if you will be using the JS version then check this: https://stackoverflow.com/a/48753896/8620333 – Temani Afif Jun 08 '20 at 09:20
  • @TemaniAfif I added `` and `display: none` in addition to my css. It worked! Thank you so much! It looks a bit hacky tho. Does my approach look correct to you? Also please write that link into answer, so I can give you an up vote :D – Tom Jun 08 '20 at 09:27
  • 1
    better follow this answer: https://stackoverflow.com/a/48753896/8620333 and add the attribute inside the script which is the most up dated method and it's not hacky, this is the way to do. If you follow the links I added there to the documentation you will see the same – Temani Afif Jun 08 '20 at 09:29

0 Answers0