Обновление версии font awesome в Prestashop 1.6
В стандартном шаблоне Prestashop 1.6 для отображения большинства пиктограмм используется библиотека масштабируемых векторных иконок Font Awesome. Это очень удобно, так как объем подгружаемой графики минимален, а следовательно и уменьшается время загрузки страниц. Однако обновление встроенной версии библиотеки иконок происходит значительно реже, чем эта библиотека обновляется у разработчика, и часто возникает ситуация, когда вы хотите модернизировать шаблон, а при этом оказывается, что понравившейся иконки нет в наборе, потому что у вас старая версия библиотеки.
Чтобы помочь вам в этой ситуации, я хочу рассказать о том, как обновить версию библиотеки Font Awesome в вашем шаблоне Prestashop.
Прежде всего, следует загрузить последнюю версию Font Awesome с сайта разработчика. Затем необходимо переписать существующие файлы Font Awesome загруженными новыми в следующих каталогах:
/themes/ваш текущий шаблон/font
/ваш admin-каталог/themes/default/fonts
/modules/themeconfigurator/views/css/font
И наконец, необходимо изменить включение версии Font Awesome в global.css (основном css-файле вашего текущего шаблона). Для этого найдите следующий код в этом файле:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/*! * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ /* FONT PATH * -------------------------- */ @font-face { font-family: 'FontAwesome'; src: url("../fonts/fontawesome-webfont.eot?v=4.3.0"); src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; } |
Как видите, текущее определение соответствует версии Font Awesome 4.3, на момент написания этой статьи, последняя версия Font Awesome — 4.7, поэтому нам нужно изменить определение Font Awesome следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/*! * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ /* FONT PATH * -------------------------- */ @font-face { font-family: 'FontAwesome'; src: url("../fonts/fontawesome-webfont.eot?v=4.7.0"); src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; } |
Это — все. Теперь вы можете включать в ваш шаблон новые иконки.
Добавить комментарий