How can I resize an icon added to my website header?

hellocc
Excursionist
47 0 5

Hi,

 

I'm trying to remove the login/logout text in my theme and replace them with the an icon.

I have added the icon to my header (see code below) but I can' seem to target it in order to make it smaller. 

Can anyone help please? Thank you!

 

 

 

          {% if shop.customer_accounts_enabled %}
            {% if customer %}
              <li class="top-bar__menu-item">
                <a
                  class="top-bar__menu-item-link"
                  id="customer_logout_link"
                  href="{{ routes.account_logout_url }}"
             >

<span  id="customer_login_link"> <img src="https://cdn.shopify.com/s/files/1/0760/8457/6545/files/account_icon_2f25c866-ba5a-43c8-8be0-c2dad31ec4ed.png?v=1708023560" alt="account" /></span>


                  
                  {{- 'layout.customer.log_out' | t -}}
                </a>
              </li>
              {% if customer.name != blank %}
                <li class="top-bar__menu-item">
                  <a
                    class="top-bar__menu-item-link"
                    href="{{ routes.account_url }}"
                    data-no-instant
                  >
                    {{- customer.name -}}
                  </a>
                </li>
              {% endif %}
            {% else %}
              <li class="top-bar__menu-item">
                <a
                  class="top-bar__menu-item-link"
                  id="customer_login_link"
                  href="{{ routes.account_login_url }}"   
                >

                  <span  id="customer_login_link"> <img src="https://cdn.shopify.com/s/files/1/0760/8457/6545/files/account_icon_2f25c866-ba5a-43c8-8be0-c2dad31ec4ed.png?v=1708023560" alt="account" /></span>


                  
                  {{- 'layout.customer.log_in' | t -}}
                </a>
              </li>
            {% endif %}
          {% endif %}

 

 

 

 

Screen Shot 2024-02-15 at 3.06.06 PM.png

 

Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

Hi @hellocc 

I'm Dan from Ryviu: Product Reviews & QA

 

You can remove those parts to remove those codes to remove the texts 

Screenshot 2024-02-16 at 15.21.46.png

Best Regards,

 

Dan

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

BSS-Commerce
Shopify Expert
3477 461 515

Hi @hellocc ,

Insert attribute width and height on <img> tag

width="20" height="20"

view - 2024-02-19T090426.435.png

And this is the final result:

view - 2024-02-19T090451.193.png

Hope it works @hellocc 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development