Re: Change icon on product detail page (Avone Theme)

Change icon on product detail page (Avone Theme)

TamaraW
Visitor
3 0 1

Hi,

 

i want to change the paper plane Icon on my product page. 

 

I found this page: https://www.adornthemes.com/optimal-icons/

But when i change <i class="ad ad-paper-l-plane"></i> with any of the provided icons on the website, it doesn't work. I've tried it in the product-template.liquid.

 

Any idea how i can change the icon?

 

Replies 4 (4)

RJK90
Shopify Partner
14 2 3

Hi @TamaraW ,

It seems you might be using <i class="ad ad-paper-l-plane"></i>, but it should be <i class="at at-paper-l-plane"></i>. Please make sure to use the correct class for the desired icon.

I checked by this.
Screenshot-from-2023-11-30-23-48-10.png

Hope! This will helps you.

Dan-From-Ryviu
Shopify Partner
11626 2277 2459

Hi @TamaraW 

The code should be like below to make it works

<i class="at at-paper-l-plane"></i> 

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

TamaraW
Visitor
3 0 1

Sorry, i think my test was misleading.

 

I want to change the paper plane icon to e.g. at-truck-l

Therefore i've opened the product-template-liquid in the code of the theme. Searched the place where the code of the paper plane is and changed it to at-truck-l.

 

But the only thing which happens is that the icon disappear completely. 

It seems like the code is only able to interpret the already existing icon codes. Cause when i change the paper plane to a heart (it's the icon of the wishlist), the heart icon will be shown.

 

Here is a screenshot of the section where i want to change the icon.

TamaraW_0-1701428207154.png

And this is what it looks like, when i change the code to the truck:

TamaraW_1-1701428295547.png

And when i change it to the heart which you can see also on the left:

TamaraW_2-1701428351708.png

 

 

Sanjay_Khunt
Shopify Partner
4 0 0

You should use below code for truck icon.

<i class="at at-truck-l"></i>