- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
Magento. Как работать со значками FontAwesome
Август 17, 2016
Из этого туториала Вы узнаете, как изменить значки Font Awesome в Magento.
ВНИМАНИЕ: Мы настоятельно рекомендуем сделать резервную копию каждого файла перед внесением изменений.
-
Нажмите на значок правой кнопкой мышки и используйте инструмент ‘Исследовать элемент’, для того чтобы найти класс CSS значка и скопируйте этот класс CSS.
-
Откройте файл css с правилом, которое Вы исследовали, на сервере или на компьютере, используя редактор кода и найдите в нём код класса, в нашем случае, это — /skin/frontend/tm_themes/theme718/css/styles.css.
-
Значок задан при помощи кода content: «\f106»;. Вы можете использовать этот Список значков Font Awesome, для того чтобы выбрать другой значок и найти соответствующее значение кода. Также, Вы можете использовать поисковые движки, для того чтобы его найти.
Мы заменим текущий значок на двойную стрелку вверх. Нажав на значок, скопируйте его Unicode.
-
Вставьте Unicode, скопированный с сайта FontAwesome в ваше правило css в skin/frontend/tm_themes/themeXXX/css/styles.css, чтобы это выглядело таким образом:
.footer #back-top span::before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: "\f106"; font-size: 45px; line-height: 40px; }
-
Сохраните изменения и обновите сайт.
Вы можете также ознакомиться с детальным видео-туториалом ниже:
Magento. Как работать со значками Font Awesome