How to add Discord and Telegram icons to my Ride theme website?

Solved

How to add Discord and Telegram icons to my Ride theme website?

franco33
Tourist
7 0 2

Hi Guys,

 I am running the Ride theme and I am trying to add the discord icon and telegram icon onto my website.

I tried replacing the Pinterest icon and vimeo icon with discord and telegram icon but have not been successful any tips are greatly appreciated.

 

Accepted Solution (1)

gonzacaminos
Shopify Partner
4 2 2

This is an accepted solution.

Hey there! 

  1. Go to your Files
  2. Upload the telegram and discord icon you want to use, they can be in any format. Once you uploaded both click on the link button next to each so you can copy the url, save them somewhere.
  3. Go to Themes and Customize the theme you are using. Under Theme Settings > Social Media, add just the links to your Telegram and Discord, you can add them in any of the available text fields. 
  4. Go to Custom CSS and paste the following code:

 

a.link.list-social__link[href*="telegram"],
a.link.list-social__link[href*="discord"] {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

a.link.list-social__link[href*="telegram"] svg,
a.link.list-social__link[href*="discord"] svg {
  display: none;
}

a.link.list-social__link[href*="discord"] {
  background-image: url("PASTE-DISCORD-IMAGE-LINK-HERE");
}

a.link.list-social__link[href*="telegram"] {
  background-image: url("PASTE-TELEGRAM-IMAGE-LINK-HERE");
}​

 

 

  • Replace the URLs for the ones you copied on your files page. 


Should be working now, good luck!

View solution in original post

Replies 5 (5)

gonzacaminos
Shopify Partner
4 2 2

This is an accepted solution.

Hey there! 

  1. Go to your Files
  2. Upload the telegram and discord icon you want to use, they can be in any format. Once you uploaded both click on the link button next to each so you can copy the url, save them somewhere.
  3. Go to Themes and Customize the theme you are using. Under Theme Settings > Social Media, add just the links to your Telegram and Discord, you can add them in any of the available text fields. 
  4. Go to Custom CSS and paste the following code:

 

a.link.list-social__link[href*="telegram"],
a.link.list-social__link[href*="discord"] {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

a.link.list-social__link[href*="telegram"] svg,
a.link.list-social__link[href*="discord"] svg {
  display: none;
}

a.link.list-social__link[href*="discord"] {
  background-image: url("PASTE-DISCORD-IMAGE-LINK-HERE");
}

a.link.list-social__link[href*="telegram"] {
  background-image: url("PASTE-TELEGRAM-IMAGE-LINK-HERE");
}​

 

 

  • Replace the URLs for the ones you copied on your files page. 


Should be working now, good luck!

franco33
Tourist
7 0 2

Hi Gonzacaminos,

 

this worked perfectly thank you!!!

franco33
Tourist
7 0 2

Screenshot 2023-06-01 201309.png

 

only problem im running into is that they now appear a bit too high 

Atiqot
Tourist
8 1 2

Hi Friend,

I try to use your CSS and add telegram icon to social media items. 

Somehow code don't work for me. 

I past it directly theme.css 

 

Maybe you have an idea how to improve it?

www.atiqot.com

 

Sincerely, Liya

anjalik
Visitor
3 0 0

Great Groups for Telegram related Discussion: Telegram Group Links