Превращение флажка в флажок Font Awesome с правильной версией

Я нашел пример рабочей версии с Font Awesome 4.4.

Однако, как только я попытался обновить его до более поздней версии, скажем, https://use.fontawesome.com/releases/v5.7.0/css/all.css, он больше не работает. Я также проверил юникод, например. этот флажок в документе изменился по сравнению с приведенным ниже кодом CSS ?! https://fontawesome.com/icons/square?style=regular

Чтобы еще больше запутаться, в документе Font awesome говорится: «Обновлено: версия 5.10.2». Я не могу перейти на другую версию, чтобы проверить, имеет ли значок флажка тот же юникод.

<!--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>

и

/*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;}

Может кто-нибудь объяснить мне, что происходит с разными версиями Font Awesome и их юникодами?

Как исправить код для работы с более новыми версиями Font Awesome 5.7 или 5.10?


css font-awesome font-awesome-5
person Tom    schedule 08.06.2020    source источник
comment
семейство шрифтов Font Awesome Free   -  person Temani Afif    schedule 08.06.2020
comment
а чтобы исправить юникод, вам просто нужно использовать новый. V5 — это полностью новая версия, в которой все изменилось fontawesome.com/how-to-use/on-the-web/setup/   -  person Temani Afif    schedule 08.06.2020
comment
вы также можете рассмотреть возможность использования комплекта, который позволяет обрабатывать старые значки (связанные: stackoverflow.com/a/59693798/8620333)   -  person Temani Afif    schedule 08.06.2020
comment
Не повезло, я попробовал пример из ссылки «обновление с версии 4». По примеру открыл чистый проект и сделал <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js"></script> и скопировал пример css .calendar::before {font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f133"; } Однако получилась битая иконка. Что мне не хватает, любая идея?   -  person Tom    schedule 08.06.2020
comment
если вы будете использовать версию JS, проверьте это: stackoverflow.com/a/48753896/8620333   -  person Temani Afif    schedule 08.06.2020
comment
@TemaniAfif Я добавил <script>FontAwesomeConfig = { searchPseudoElements: true };</script> и display: none в дополнение к моему css. Это сработало! Большое спасибо! Это выглядит немного хакерским. Мой подход кажется вам правильным? Также, пожалуйста, напишите эту ссылку в ответ, чтобы я мог проголосовать за вас: D   -  person Tom    schedule 08.06.2020
comment
лучше следуйте этому ответу: stackoverflow.com/a/48753896/8620333 и добавьте атрибут внутри скрипта, который наиболее актуален устаревший метод, и это не хакерство, это способ сделать. Если вы перейдете по ссылкам, которые я добавил в документацию, вы увидите то же самое.   -  person Temani Afif    schedule 08.06.2020