Как обновить шрифты Font Awesome с версии 4.3 до 4.7 в prestashop 1.6?

  • Автор темы Автор темы lightman5
  • Дата начала Дата начала

lightman5

Продвинутый (IV)
Сообщения
290
Реакции
19
Баллы
1 328
Всех приветствую!
Подскажите как можно обновиться?
Мне понадобился значок телеграмма а в старом наборе его нет.
Так как версии из одной линейки то я подумал, что просто заменить файлы будет достаточным, но не выходит и по какой то причине в основном файле стилей global.css прописывается все же старые классы от 4.3.
Я конечно не сильно разбираюсь, но по идее должно было автоматом переписаться либо это как то в ручную делается и если так то где взять этот весь список иконок?

вот пример из файла global:
.icon-whatsapp:before {
content: ""; }

.icon-server:before {
content: ""; }

.icon-user-plus:before {
content: ""; }

.icon-user-times:before {
 
через SVG можно добавлять любую иконку

.fa-shopping-bag:before {content:url(" yourSVG " !important;)

пример:

.fa-shopping-bag:before {content:url("data:image/svg+xml;charset=utf-8,%3Csvg width='21' height='26' viewBox='0 0 21 26' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M10.317 14.577A5.2 5.2 0 0 1 5.212 10.4a.867.867 0 0 1 .867-.997.867.867 0 0 1 .866.72 3.467 3.467 0 0 0 6.786 0 .867.867 0 0 1 .867-.72.867.867 0 0 1 .867.997 5.2 5.2 0 0 1-5.148 4.177z' fill='%231B2128'/%3E%3Cpath d='M18.03 26H2.603a2.6 2.6 0 0 1-2.6-2.73L.705 8.33a2.6 2.6 0 0 1 2.6-2.488h14.023a2.6 2.6 0 0 1 2.6 2.488l.702 14.941a2.598 2.598 0 0 1-2.6 2.73zM3.305 7.583a.867.867 0 0 0-.866.867l-.702 14.907a.867.867 0 0 0 .866.91H18.03a.866.866 0 0 0 .867-.91l-.702-14.942a.867.867 0 0 0-.867-.866l-14.023.034z' fill='%231B2128'/%3E%3Cpath d='M15.517 6.717h-1.734V5.2a3.467 3.467 0 1 0-6.933 0v1.517H5.117V5.2a5.2 5.2 0 1 1 10.4 0v1.517z' fill='%231B2128'/%3E%3C/svg%3E") !important;}
 
через SVG можно добавлять любую иконку

.fa-shopping-bag:before {content:url(" yourSVG " !important;)

пример:

.fa-shopping-bag:before {content:url("data:image/svg+xml;charset=utf-8,%3Csvg width='21' height='26' viewBox='0 0 21 26' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M10.317 14.577A5.2 5.2 0 0 1 5.212 10.4a.867.867 0 0 1 .867-.997.867.867 0 0 1 .866.72 3.467 3.467 0 0 0 6.786 0 .867.867 0 0 1 .867-.72.867.867 0 0 1 .867.997 5.2 5.2 0 0 1-5.148 4.177z' fill='%231B2128'/%3E%3Cpath d='M18.03 26H2.603a2.6 2.6 0 0 1-2.6-2.73L.705 8.33a2.6 2.6 0 0 1 2.6-2.488h14.023a2.6 2.6 0 0 1 2.6 2.488l.702 14.941a2.598 2.598 0 0 1-2.6 2.73zM3.305 7.583a.867.867 0 0 0-.866.867l-.702 14.907a.867.867 0 0 0 .866.91H18.03a.866.866 0 0 0 .867-.91l-.702-14.942a.867.867 0 0 0-.867-.866l-14.023.034z' fill='%231B2128'/%3E%3Cpath d='M15.517 6.717h-1.734V5.2a3.467 3.467 0 1 0-6.933 0v1.517H5.117V5.2a5.2 5.2 0 1 1 10.4 0v1.517z' fill='%231B2128'/%3E%3C/svg%3E") !important;}
Благодарю! Это я понял - хотел просто шрифт заменить (обновить)
 
Всех приветствую!
Подскажите как можно обновиться?
Мне понадобился значок телеграмма а в старом наборе его нет.
Так как версии из одной линейки то я подумал, что просто заменить файлы будет достаточным, но не выходит и по какой то причине в основном файле стилей global.css прописывается все же старые классы от 4.3.
Я конечно не сильно разбираюсь, но по идее должно было автоматом переписаться либо это как то в ручную делается и если так то где взять этот весь список иконок?

вот пример из файла global:
.icon-whatsapp:before {
content: ""; }

.icon-server:before {
content: ""; }

.icon-user-plus:before {
content: ""; }

.icon-user-times:before {
меняете в global.css затем в папке библиотеку на 4.7
Код:
/fonts/
 
меняете в global.css затем в папке библиотеку на 4.7
то есть - это в ручную менять? Пожалуйста - если не сложно - опишите процесс? В глобал - что нужно заменить - все строки принадлежащие версии 4.3? там очень много - думаю подтягивает откуда то туда..
а библиотеки - это куда и какие файлы перекинуть?
я только перекидывал файлы в папку fonts в самой теме
 
Скачать Font Awesome 4.7.0
https://github.com/onface/font-awesome
распаковать полученый архив font-awesome-master.zip
открыть папку font-awesome-master, находящуюся там папку fonts перенести на сайт в вашу тему, с заменой
вернуться в папку font-awesome-master, перейти в \css
открыть файл font-awesome.css

найти и скопировать
от
Код:
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
до
Код:
.fa-meetup:before {
  content: "\f2e0";
}
включительно

Вставить это в созданый текстовый документ, далее с этим надо "пошаманить"
а именно, найти все
Код:
.fa-
и заменить на
Код:
.icon-
где то 786 изменений

После чего полученое переносим в global.css вашей темы, заменяя

от(включительно)
Код:
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */

до (включительно)

Код:
.icon-medium:before {
  content: ""; }

Там же в global.css найти v=4.3.0 и заменить на v=4.7.0 (6 шт)
Ну и напоследок, перекинуть font-awesome.css (с заменой) из font-awesome-master\css в папку ваша_тема\css\font-awesome\

Для значка Телеграмм использовать класс icon-telegram
например
<em class="icon-telegram"></em>

P.S. Данная инструкция для стандартной темы default-bootstrap
 
Назад
Верх