Can someone please help me about an icon?

[iceyp]

Hi,

I'm trying to add '' Instagram Icon '' to Description part. I have it at the bottom of page and found the code, tried to paste to description but it doesn't work.

Can someone assist me where to add the code to add this '' clickable Instagram icon ''  to Description area? 

I'm adding a picture to show you better how i want it look like. I just photoshopped it.Who can help me about it?

My url : www.iceypyramid.com

Thank you very much in advance,
Best Regards,

[oscprofessional · Accepted solution]

@iceyp ,

<li class="list-social__item">
<a href="https://www.instagram.com/iceypyramid/" class="link list-social__link"><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-instagram" viewBox="0 0 18 18">
<path fill="currentColor" d="M8.77 1.58c2.34 0 2.62.01 3.54.05.86.04 1.32.18 1.63.3.41.17.7.35 1.01.66.3.3.5.6.65 1 .12.32.27.78.3 1.64.05.92.06 1.2.06 3.54s-.01 2.62-.05 3.54a4.79 4.79 0 01-.3 1.63c-.17.41-.35.7-.66 1.01-.3.3-.6.5-1.01.66-.31.12-.77.26-1.63.3-.92.04-1.2.05-3.54.05s-2.62 0-3.55-.05a4.79 4.79 0 01-1.62-.3c-.42-.16-.7-.35-1.01-.66-.31-.3-.5-.6-.66-1a4.87 4.87 0 01-.3-1.64c-.04-.92-.05-1.2-.05-3.54s0-2.62.05-3.54c.04-.86.18-1.32.3-1.63.16-.41.35-.7.66-1.01.3-.3.6-.5 1-.65.32-.12.78-.27 1.63-.3.93-.05 1.2-.06 3.55-.06zm0-1.58C6.39 0 6.09.01 5.15.05c-.93.04-1.57.2-2.13.4-.57.23-1.06.54-1.55 1.02C1 1.96.7 2.45.46 3.02c-.22.56-.37 1.2-.4 2.13C0 6.1 0 6.4 0 8.77s.01 2.68.05 3.61c.04.94.2 1.57.4 2.13.23.58.54 1.07 1.02 1.56.49.48.98.78 1.55 1.01.56.22 1.2.37 2.13.4.94.05 1.24.06 3.62.06 2.39 0 2.68-.01 3.62-.05.93-.04 1.57-.2 2.13-.41a4.27 4.27 0 001.55-1.01c.49-.49.79-.98 1.01-1.56.22-.55.37-1.19.41-2.13.04-.93.05-1.23.05-3.61 0-2.39 0-2.68-.05-3.62a6.47 6.47 0 00-.4-2.13 4.27 4.27 0 00-1.02-1.55A4.35 4.35 0 0014.52.46a6.43 6.43 0 00-2.13-.41A69 69 0 008.77 0z"></path>
<path fill="currentColor" d="M8.8 4a4.5 4.5 0 100 9 4.5 4.5 0 000-9zm0 7.43a2.92 2.92 0 110-5.85 2.92 2.92 0 010 5.85zM13.43 5a1.05 1.05 0 100-2.1 1.05 1.05 0 000 2.1z">
</path></svg>
<span class="visually-hidden">Instagram</span>
</a>
</li>

Use above code

[iceyp]

@oscprofessional You're amazing! Thanks a lot, it seems it worked and clickable too but i see there's '' • '' symbol. Is it possible to remove it?

Thanks again, high respect!

[KetanKumar]

@iceyp 

add direct image 

[iceyp]

Thank you for advice but i want to remove only '' • '' symbol. It looks great like that now. • sign just looks weird

[KetanKumar]

@iceyp 

yes, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/component-collection-hero.css ->paste below code at the bottom of the file.

.collection-hero__description li {
    list-style: none !important;
}
.collection-hero__description li a {
    padding-left: 0 !important;
}

[iceyp]

Thanks a lot @KetanKumar , it worked. There's no symbol anymore!

And @oscprofessional Much thanks to you as well.

You guys are incredible!!