• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Marek
  • Private: No
  • Open Date: 27.06.17, 12:38
  • Opened by: graziano
  • Closed by: Marek
  • Closed on: 29.08.17, 23:42
  • Reason: Closed
  • Comment: Glad to help!

Ticket #10505 - Change social icons

Hallo, how can I change the default social icons?
Thanks
Graziano

Comments

graziano 29 Jun 2017, 15:57

I founded this in ps_sharebutton.tpl

        <li class="{$social_share_link.class}"><a rel="nofollow" href="{$social_share_link.url}"><svg class="svgic"><use xlink:href="#si-{$social_share_link.class}"></use></svg></a></li>

How can I customize it to change icons?
G

Marek 29 Jun 2017, 22:46

Hi Graziano.
I need to clarify, do you want to change icons (just view) or social networks.

graziano 30 Jun 2017, 09:51

Icons

Marek 30 Jun 2017, 10:18

Ok, all icons collected in one file /themes/alysum/templates/_partials/svg.tpl
So, for example you want to change “facebook” icon.
1. find “facebook” icon, it looks like this:

<symbol id="si-facebook" viewBox="0 0 288.861 288.861">
<path d="M167.172,288.861h-62.16V159.347H70.769v-59.48h.....
</symbol>

2. Find new icon, for example here: http://www.flaticon.com 3. Download it and open in any Text Editor
4. Copy all code between “<svg>” and “</svg>” tags
5. Paste it into the file svg.tpl between “<symbol id=”si-facebook” viewBox=”0 0 288.861 288.861”>” and “</symbol>” 6. Copy SVG dimensions

<svg viewBox="0 0 27.965 27.965">

and update them in symbol tag like this

<symbol id="si-facebook" viewBox="0 0 27.965 27.965">
graziano 30 Jun 2017, 11:55

ok … I try and I get you know …thanks a lot

Graziano

Marek 30 Jun 2017, 12:01

No problem.
I just added this tutorial to our documentation https://alysum5.promokit.eu/documentation/#!/svg

Gabriela Popovici 07 Aug 2017, 12:18

Hy, How can I install the font awesome icons and use them in the website instead of the svg icons? Thanks!

Marek 07 Aug 2017, 12:58
Marek 07 Aug 2017, 12:59

I want to ask you about translation, can you share your translation with us?

Gabriela Popovici 07 Aug 2017, 14:49

I know the w3schools website and I read it but I can’t incorporate the code because I do not have a head section in the tpl file. I have changed the language in .tpl files. Thx!

Marek 07 Aug 2017, 14:53

Yes, now I see.
You need this file /themes/alysum/templates/_partials/head.tpl

Gabriela Popovici 07 Aug 2017, 15:49

If I want to translate in romanian the other elements, for example the custom links or email subscription in footer, how to do that without modify the backend?

Marek 07 Aug 2017, 15:52

Go to “International” > “translations” > http://awesomescreenshot.com/0306cppe49

That is only one way to translate.
I also would like to ask you to share your translation in case you will finish it. We want to make out theme multilingual