Начать новую тему

Как изменить иконку "Мой профиль"

Добрый день.


подскажите как можно изменить иконку возле ссылки "Мой профиль"


спасибо

Здравствуйте.


Данная иконка добавляются с помощью шрифта.


В первую очередь в шаблоне создается элемент, например, <i class="ty-icon-user"></i>, которому присваивается класс иконки. В данном случае это ty-icon-user. Если открыть инструмент разработчика в браузере, то для иконки можно увидеть следующее CSS правило:

.ty-icon-user:before {
    content: "\e024";
}

Список всех иконок с соответствующими названиями классов хранится в файле .svg, который является частью темы. К сожалению, на данный момент в Мерчиуме этот файл недоступен для замены или редактирования. Если вы хотите заменить какую-либо иконку, необходимо изменить значение свойства content в соответствующем правиле. Например, 

.ty-icon-user:before {
    content: "\e004";
}

Данное правило нужно добавлять в секцию Пользовательские CSS редактора тем.


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


Надеюсь, данное объяснение окажется полезным для вас. Если у вас будут дальнейшие вопросы, пожалуйста, сообщите.


Спасибо.

1.png
(173 KB)

Добрый день.

спасибо за исчерпывающую информацию.


подскажите, возможно ли разместить произвольную иконку из файла, как это возможно для иконки с корзиной.


спасибо

Здравствуйте.

Да, вы можете загрузить и использовать свою иконку, также как с иконкой для корзины.


Сначала необходимо получить ссылку на изображение, например, загрузить ее на сервер Мерчиума:

1. В администраторской части магазина перейдите на страницу Администрирование > Файлы.
2. Загрузите изображение в желаемую директорию.

3. Откройте контекстное меню файла.

4. Выберите Свойства.

5. В поле Ссылка cкопируйте ссылку на файл.


Использование изображений со сторонних серверов также возможно, если имеется ссылка на изображение.


Затем нужно добавить пользовательские стили:

1. В панели администратора перейдите на страницу Дизайн > Темы.
2. Нажмите на кнопку Визуальный редактор справа от выбранной темы.
3. Откройте секцию Пользовательские CSS.
4. Вставьте код, указанный ниже.

.ty-account-info__title {
    background-image: url(СКОПИРОВАННАЯ_ССЫЛКА);
    background-position: left;
    background-repeat: no-repeat;
    background-size: 15px 15px;
}
.ty-icon-user:before {
    content: "";
}


5. Нажмите Сохранить.

   

Надеемся, данная информация окажется полезной для вас. Пожалуйста, проверьте.


Спасибо.


Войдите, чтобы опубликовать свой комментарий