Categories

Новые шаблоны

Magento. Как работать со значками FontAwesome

Alice Weasley Август 17, 2016
Rating: 5.0. From 2 votes.
Please wait...

Из этого туториала Вы узнаете, как изменить значки Font Awesome в Magento.

ВНИМАНИЕ: Мы настоятельно рекомендуем сделать резервную копию каждого файла перед внесением изменений.

  1. Нажмите на значок правой кнопкой мышки и используйте инструмент ‘Исследовать элемент’, для того чтобы найти класс CSS значка и скопируйте этот класс CSS.

    Magento_How_to_manage_font_awesome_icons_1

  2. Откройте файл css с правилом, которое Вы исследовали, на сервере или на компьютере, используя редактор кода и найдите в нём код класса, в нашем случае, это — /skin/frontend/tm_themes/theme718/css/styles.css.

    Magento_How_to_manage_font_awesome_icons_2

  3. Значок задан при помощи кода content: «\f106»;. Вы можете использовать этот Список значков Font Awesome, для того чтобы выбрать другой значок и найти соответствующее значение кода. Также, Вы можете использовать поисковые движки, для того чтобы его найти.

  4. Мы заменим текущий значок на двойную стрелку вверх. Нажав на значок, скопируйте его Unicode.

    Magento_How_to_manage_font_awesome_icons_3

  5. Вставьте 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;
    }
  6. Сохраните изменения и обновите сайт.

    Magento_How_to_manage_font_awesome_icons_4

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Magento. Как работать со значками Font Awesome
Темы для Magento
Эта запись была размещена в Magento туториалы и помечена как fontawesome, icons, Magento. Добавьте в закладки постоянную ссылку.

Submit a ticket

Если вы не смогли найти подходящее решение проблемы, пожалуйста воспользуйтесь следующей ссылкой, чтобы отправить запрос команде технической поддержки.
Отправить запросВы получите ответ в течение 24 часов