How to change cart, search and account text to icon in header?

[Toystory]

Hi, 

Currently i`m running a older prestige theme so in the header cart, account and search are shown as text. But i would like them to be icon, i have looked into into this code for example but it would show the icons vertically under each other, i would like them to be next to each other in a horizontal line.

website url: www.speeltjestuin.nl
Password: paars

Code i tried:

<div class="Header__FlexItem Header__FlexItem--fill"><a href="/account" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable hidden-phone"><svg class="Icon Icon--account" role="presentation" viewBox="0 0 20 20">

      <g transform="translate(1 1)" stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square">

        <path d="M0 18c0-4.5188182 3.663-8.18181818 8.18181818-8.18181818h1.63636364C14.337 9.81818182 18 13.4811818 18 18"></path>

        <circle cx="9" cy="4.90909091" r="4.90909091"></circle>

      </g>

    </svg></a><a href="/search" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable " data-action="toggle-search" aria-label="Search">

        <span class="hidden-tablet-and-up"><svg class="Icon Icon--search" role="presentation" viewBox="0 0 05 05">

      <g transform="translate(1 1)" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="square">

        <path d="M16 16l-5.0752-5.0752"></path>

        <circle cx="6.4" cy="6.4" r="6.4"></circle>

      </g>

    </svg></span>

        <span class="hidden-phone"><svg class="Icon Icon--search-desktop" role="presentation" viewBox="0 0 05 05">

      <g transform="translate(1 1)" stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square">

        <path d="M18 18l-5.7096-5.7096"></path>

        <circle cx="10" cy="10" r="10"></circle>

      </g>

    </svg></span>

      </a>

      <a href="/cart" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable " data-action="open-drawer" data-drawer-id="sidebar-cart" aria-expanded="false" aria-label="Open cart">

        <span class="hidden-tablet-and-up"><svg class="Icon Icon--cart" role="presentation" viewBox="0 0 30 30">

      <path d="M0 20V4.995l1 .006v.015l4-.002V4c0-2.484 1.274-4 3.5-4C10.518 0 12 1.48 12 4v1.012l5-.003v.985H1V19h15V6.005h1V20H0zM11 4.49C11 2.267 10.507 1 8.5 1 6.5 1 6 2.27 6 4.49V5l5-.002V4.49z" fill="currentColor"></path>

    </svg></span>

        <span class="hidden-phone"><svg class="Icon Icon--cart-desktop" role="presentation" viewBox="0 0 30 30">

      <path d="M0 22.985V5.995L2 6v.03l17-.014v16.968H0zm17-15H2v13h15v-13zm-5-2.882c0-2.04-.493-3.203-2.5-3.203-2 0-2.5 1.164-2.5 3.203v.912H5V4.647C5 1.19 7.274 0 9.5 0 11.517 0 14 1.354 14 4.647v1.368h-2v-.912z" fill="currentColor"></path>

    </svg></span>

        <span class="Header__CartDot"></span>

      </a>

    </div>

[john2636]

Any luck fixing this? I have same issue