Hello!
I want to add an icon for TheKnot.com to my page by my other social icons. I’ve uploaded the image I want to use into our files but am not sure how/where I can add that and a link to our page so that it’s by our other social media icons. Any ideas?
Thanks!
Hi, Amy,
I just went through this with our site and we also use the Turbo theme.
The Turbo theme uses a special font (also called Turbo) which has social media and other icons (like the shopping cart, arrows, etc.) as characters and the specific character for each button is defined in your Style file using an escape code. There is a great font called Socicon that has a huge number of social icons, and I was able to use that to add buttons for sites that do not appear in the Turbo font, but I just checked and unfortunately The Knot is not one of the characters.
It is possible to use image files for the buttons, but getting a consistent look may be a bit of a challenge. It’s also going to depend on whether you have any effects on your buttons, like a color change when you hover over it. I believe you’re talking about the icons that link to your social media page, and not the share buttons that appear on the product pages, is that correct? (I’m not familiar with The Knot.) If so, the files in question are your social-icons.liquid, which has the HTML for the icons, and your styles.css.liquid, which defines how they look.
If you’d like to share the url of your site, someone may be able to offer more help.
Good luck!
Jason
Thanks for the reply, Jason! Our site is kalamazoocandle.com
I can update The Knot’s logo to get a consistent look with the rest of the social icons, so that’s no problem. I took a look at the social-icons.liquid html. I am only semi familiar/comfortable with html so I am not 100% sure where I need to add in our custom image file and link. If you or anyone else knows what/where I need to paste my image url and link, that would be so helpful!
Thank you!!
{% comment %}
** Social feeds (Instagram and Twitter) - homepage partial **
{% if block.settings.instagram_client_id != blank %}
{% else %}{% if block.type == ‘twitter’ %}
<a id=“twitter-timeline” class=“twitter-timeline” data-theme=“{{ block.settings.twitter_theme }}” href=“https://twitter.com/{{ block.settings.twitter_username | replace: [email removed] “” | strip }}” data-widget-id=“319998048782647298” data-tweet-limit=“{{ block.settings.tweet_count }}” data-screen-name=“{{ block.settings.twitter_username | replace: [email removed] “” | strip }}” data-chrome=“noheader nofooter noborders transparent” data-link-color=“{{ settings.link_color }}” data-heading-style=“color:{{ settings.link_color }};font-size:{{ settings.regular_font_size }}px;font-family: {{ settings.regular_font | replace: ‘Google_’, ‘’ | replace: ‘+’, ’ ’ | replace: '”', ‘’ }}">
{% schema %}
{
“name”: “Social feeds”,
“class”: “social-feeds-section”,
“max_blocks”: 2,
“blocks”: [
{
“type”: “twitter”,
“name”: “Twitter feed”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “twitter_username”,
“label”: “Twitter username”
},
{
“type”: “text”,
“id”: “twitter_title”,
“label”: “Heading”,
“default”: “Tweets”
},
{
“type”: “radio”,
“id”: “twitter_theme”,
“label”: “Twitter feed theme”,
“default”: “light”,
“options”: [
{
“value”: “light”,
“label”: “Light”
},
{
“value”: “dark”,
“label”: “Dark”
}
]
},
{
“type”: “range”,
“id”: “tweet_count”,
“label”: “Number of tweets”,
“min”: 1,
“max”: 10,
“step”: 1,
“default”: 2
}
]
},
{
“type”: “instagram”,
“name”: “Instagram feed”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “instagram_client_id”,
“label”: “Instagram Access Token (?)”
},
{
“type”: “text”,
“id”: “instagram_title”,
“label”: “Heading”,
“default”: “Instagram”
},
{
“type”: “range”,
“id”: “instagram_count”,
“label”: “Number of images”,
“min”: 2,
“max”: 12,
“step”: 2,
“default”: 6
}
]
}
],
“presets”: [{
“name”: “Social feeds”,
“category”: “Social”,
“blocks”: [
{
“type”: “twitter”,
“settings”: {
“twitter_title”: “Tweets”
}
},
{
“type”: “instagram”,
“settings”: {
“instagram_title”: “Instagram”
}
}]
}]
}
{% endschema %}
Again, there’s a bit more to it than that. It’s going to take some tweaking to get the image to look like the other buttons. You need to define the button in your stylesheet before inserting it in the html, and I think you’re probably going to need to do it twice, once for each of your social button layouts.
As I said, the Facebook, Twitter, Instagram, and email icons on your site are actually characters in a special font. It’s easy to change the colors of the font in html/css. It’s not as easy with the image you’re going to be using, and since you have two button panels with different color schemes, I think you’re going to need two different images (unless someone who’s better at this than I am has some ideas).
I’m not a pro, but I like a challenge and got some help that I’m willing to pay forward. Shoot me an email at jason@fullkitgear.com and we’ll see if we can get this working for you.
EDIT: Hmmm… This may not be as easy as I hoped. I don’t think your site is actually using the social-icons.liquid file you shared in your last message. Do you have an app that handles that for you? Or did you have someone do some custom coding for you in the past?
Oh! So we are currently working on updating our site and I have been building things out on a theme that is not published. It is the more updated Turbo theme. Not sure if that makes a difference…?
The file you sent, is that from the theme currently being used or the theme that you’re building now? If it’s from your current theme, then it still seems like you have something else creating your social icon buttons, like an app or custom coding. If it’s from your new theme, then I’d need to see the preview of your new site to be able to help.
Hi Jason!
The code I had sent was from the new theme! I attached a couple screenshots of the site in progress. The social icons look pretty much the same as in the old theme.
Thank you for being so diligent about this!!
Amy,
This may be beyond my capabilities to help, just because there’s too much behind-the-scenes stuff. The reason I originally asked for your site was so I could look at the coding. The screen caps really don’t help.
I still think your social icons buttons are being built with something other than the liquid code you sent. The layout you showed for the new buttons in the screen caps is pretty much the same as your live site, so I think there’s something else at work here. I’m glad to help; I just don’t know how to do so without a better understanding how your site is built, what’s really creating those links.
Totally understand! It might not be doable. It’s something that’s definitely out of my wheelhouse. I appreciate your help!! Thanks for looking into it!!
I’m 99% sure it’s doable. I mean, I know how I’d go about it with my own site. But you might have to hire someone who’s part of the Partner Program and give them collaborator access to your site.
I wonder has anyone ever implemented this for Spotify?
Its sort of surprising that there is no community threads (I can find…) on adding Spotify as a social icon to follow given how the crossover and collab between brands X music has become significant.
We have a great playlist created for us to use for in-store play and to attach to our brand, and more music to come, so want to use Spotify as another social channel to engage our audience.
Carlo,
The font I mentioned, Socicon, has a Spotify icon in their collection. The difficulty is in finding Socicon itself. The website where I found it is gone, but if you google there are others that have it.
Good luck!
-J.
Hi @Carlo_Hive365 - I’m interested in adding the TikTok social icon to my Turbo theme (7.0.0). I know that the latest version of Turbo (8.3.0) now offers TikTok, so I’m wondering if this means that it’s now part of the Turbo “font”. I see that in Turbo 8.3.0, the social-icons.liquid file includes the following code:
{% if settings.tiktok_link != ‘’ %}
Do you know if there is somewhere in my Turbo 7.0.0 that i have to create the “icon-tiktok” class to get this to work? Or any other ideas?