Icon account menu

Hello! How to change the sign in to your account in the top menu on the icon?

Hello,

I’m not sure what exactly you want to achieve, can you please describe it more precisely?

Kind Regards, Roman.
aThemes Support

В верхнем меню есть Логин/Регистрация, хотел сделать вместо этой надписи иконку, чтобы с права было в едином стиле.

Здравствуйте, попробуйте использовать следующий CSS код.

Вы можете добавлять CSS код в разделе Настроить → Дополнительные стили.

.nav-link-right .nav-link-account .suffix.ion-person {
  display: inline;
}

.nav-link-right .nav-link-account .prefix {
  display: none;
}

С уважением, Роман.
Поддержка aThemes

Роман, Вы как всегда - супер!!! Спасибо!
Хотел поменять вот на эту иконку ion-ios-person-outline, вставляю ее вместо ion-person, но что-то она не появляется.

\f47d  для точности

Попробуйте добавить этот CSS код:

.nav-link-right .nav-link-account .suffix.ion-person::before {
    content: "\f47d";
    font-size: 36px;
    line-height: 2;
}

.nav-link-right > li.nav-link-account {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: 20px;
}

Второе правило задействует иконку на мобильных устройствах, сейчас она исчезает на ширине 991 пиксель и меньше (так как текст мог не помещаться на телефонах в портретной ориентации).

С уважением, Роман.
Поддержка aThemes

Первый код работал (просто иконка в дизайн не вписывалась). А этот выдает ошибку в этих строчках display: -moz-flex;
display: -ms-flex;
display: -o-flex;
и не работает

Это не ошибки, а предупреждения. Строчки эти для совместимости со старыми браузерами. Их можно удалить, но сначала можете почитать о них здесь:

По поводу того, что код не работает, можна ссылку на сайт куда вы его добавляете?

С уважением, Роман.
Поддержка aThemes

https://napitkistore.ru/

Вставляю Внешний вид-настройки- Дополнительные стили

Должно работать, я только что попробовал.

Но вам надо добавить оба фрагмента кода:

.nav-link-right .nav-link-account .suffix.ion-person {
    display: inline;
}

.nav-link-right .nav-link-account .prefix {
    display: none;
}

.nav-link-right .nav-link-account .suffix.ion-person::before {
    content: "\f47d";
    font-size: 36px;
    line-height: 2;
}

.nav-link-right > li.nav-link-account {
    display: flex;
    margin-right: 20px;
}

С уважением, Роман.
Поддержка aThemes

Роман, спасибо! Все работает. Это я ступил. Но можно ту же иконку только для десктопной версии? на мобильной все едет.

Но можно ту же иконку только для десктопной версии?

Она уже присутствует и на десктопной версии, насколько я вижу. Или я не так понял вопрос?

С уважением, Роман.
Поддержка aThemes

Мне очень неудобно перед Вами, что отнимаю время. Но в мобильной версии не надо. Только на десктопной. Из-за иконки в мобильной едет дизайн. Какую часть последнего кода вставить, чтобы было видно только на компе?

Спасибо, Роман. Я справился)) Прекрасных выходных!)

И вам спасибо!

Хороших выходных :slight_smile:

С уважением, Роман.
Поддержка aThemes