How to change Header icons to display text

[StudioBlank]

Hello everyone,

So I'm trying to change my header icons to show text instead of icons.

Can anyone help me figure it out?

Thanks

www.studioblank.store

[suyash1]

@StudioBlank - please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css

.header__icon--account span{position: relative !important; overflow: visible;}
.header__icon--account account-icon{display: none;}

.header__icon--cart .svg-wrapper{display: none;}
.header__icon--cart span.visually-hidden{position: relative !important; overflow: visible;}

.header__icon--search{content: "search";}
.header__icon--search span{display: none;}
.header__icon--search{display: flex; align-items: center;}

[StudioBlank]

How do I prevent this from happening when I log out? I want it to be in one line.

[suyash1]

@StudioBlank  can you please add the given code? so it appears like that and I can check

[StudioBlank]

Okay done.

[suyash1]

@StudioBlank -- for search , add this line and check

.header__icon--search:after{content: "search";}

[StudioBlank]

This code doesn't work but I don't need it anymore. I just want to fix the Login text and have some space between Login and Cart, like a margin of 1rem

[suyash1 · Accepted solution]

@StudioBlank add this and check

.header__icon--account{height: 6.4rem !important; width: 6.4rem !important;}
.header__icon--account span{width: 100%;}

[StudioBlank]

Yessir now it works. Thanks