How Can I Change Shop, Account & Search Icons To Text?

[worshipped]

Looking to change these icons to text but I'm not sure how to!

Going for a more luxury and sleek design and I'm using the theme Dawn but I've customized a lot of it but this is the only thing I'm struggling at figuring out.

The website is https://saintvivianne.com
and the password is: muffau

Also, ignore the password screen! It's a theme transfer from my other store & I haven't changed it yet!

[brandography · Accepted solution]

Hi @worshipped 

You'll need to find the code for each icon in the header.liquid file and replace them with your text. Here's a code example for the cart to get you started:

Find and replace this code:

<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
        {%- liquid
          if cart == empty
            render 'icon-cart-empty'
          else
            render 'icon-cart'
          endif
        -%}
        <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
        {%- if cart != empty -%}
          <div class="cart-count-bubble">
            {%- if cart.item_count < 100 -%}
              <span aria-hidden="true">{{ cart.item_count }}</span>
            {%- endif -%}
            <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
          </div>
        {%- endif -%}
      </a>

With this code:

<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
        Cart (<span aria-hidden="true">{{ cart.item_count }}</span>
      </a>

I'd also suggest making a copy of your theme first before you make any code changes, as well as just commenting out code versus deleting things all together 😉 

[worshipped]

I'm now facing this issue. When I added a product in my cart, it looks like this now.

[RobArt98]

Same issue or problem here. Can someone assist? 

Would like to have a solution like this.

Desktop version: Login, Search, Cart without Icon , even when putting some article into cart - still "CART" displayed

Mobile version: Keeping icons for Login, Search and Cart 

[worshipped]

Do you think you could help me figure out the search button as well?
I'd like to remove the icon but the code is extremely lengthy and I have zero clear what to change to make it just say "SEARCH" instead of the icon.

[StudioBlank]

Add this below code before </body> in "theme.liquid"

<style>
.header__icons a#cart-icon-bubble {
    position: relative;
}
.header__icons a#cart-icon-bubble svg {
    opacity: 0;
    width: 60px !important;
}
.header__icons a#cart-icon-bubble:before {
    position: relative;
    content: 'CART';
}
.header__icons a#cart-icon-bubble .cart-count-bubble {
    left: auto;
    right: 0px;
}
</style>

May i ask you how did you change the Account icon to text?
Thanks.