Hi, I would like to add a TripAdvisor icon/link in the top social media area of Travelify. Does anyone have any advice on how to go about doing this? Where are the files for the existing icons located in the theme files? Thanks for your time and assistance!
Travelify theme uses http://genericons.com/ for social icons which is font based solution and since there is no TripAdvisor icon available in their library it would require to rewrite the entire thing to replace icons with some other social icon library.
However, here is a sneaky trick how you can replace Tumblr icon with some random icon (look up TripAdvisor icon and upload on your server and replace below listed URL with it). You should add your TripAdvisor URL in place where you would originally place Tumblr URL and then add this code to Theme Options - Other - Custom CSS.
.social-icons li.tumblr a {
background: url(http://badges.ravelry.com/square_24.png) no-repeat;
color: transparent;
width: 28px;
height: 23px;
}
.social-icons ul li.tumblr a:before {
content: none;
}
.social-icons ul li.tumblr a:hover {
background: url(http://badges.ravelry.com/square_24.png) no-repeat;
}
This is just a general idea and it might require some tweaking to make it work on your website but it is the best solution here if you don’t want to replace the entire font library and rewrite all code around these icons.
Thank you so much Aigars!! That worked perfectly for me. I don’t use Tumblr, so it was the perfect solution.
The only thing I need to fix now is the hover text, when I curser over the logo, it comes up “tumbler” still. I will go try to solve that issue, but if you read this & know where to change that, please let me know. Thanks again, you were of great help!
Try to replace previously used code with this one (again replace urls for icons). If it doesn’t work, please post your website URL and I will look into it.
.social-icons li.tumblr a {
background: url('http://badges.ravelry.com/square_24.png') no-repeat;
color: transparent;
width: 28px;
height: 23px;
}
.social-icons ul li.tumblr a:before {
content: none;
}
.social-icons ul li.tumblr a:hover {
content: none;
background: url('http://badges.ravelry.com/square_24.png') no-repeat;
}
Ok, I’ve taken my site out of maintenance mode so you can view it: http://www.sailpepper.com
On the top right, the trip advisor social media icon works great, but when you hover your cursor over, the text that pops up says “Sail Pepper on Tumblr”
I need to change the text to read “TripAdvisor”
Where do I find that within the theme files?
Thank you for such quick replies!
Kim
Open header-extensions.php file that you can find on theme folder - library - structure. Like this:
travelify/library/structure/header-extensions.php
Now look for $social_links = array( and it that array replace 'Tumblr' with TripAdvisor or whatever name you want to see there. However, this is so minor thing that no one will ever notice.
Hi Aigars,
I changed the text in the header-extensions.php File, but it still shows the old text.
What did I wrong? (www.sebastian-zitzmann.de)
Cheers, Sebastian
zizo,
Everything works properly on your website it is just your local cache issue. When you open your website hit Ctrl+F5 (Windows) or Cmd+R (Mac) and then you should see these changes. If not, just clean browser cache via browser settings. This is just your local issues, so no big deal.
I’m trying to add a Goodreads icon to my social links, but can’t get the workaround mentioned in this thread to work on my site.
If I just add my Goodreads URL to the Tmblr field in Theme Options, I get a Tumblr icon with the Goodreads link, as expected.
I uploaded a Goodreads icon to my image directory and then added the following to the Custom CSS, but this completely removes the icon and the link.
.social-icons li.tumblr a {
background: url(http://www.asamariabradley.com/images/goodreadsgrey.png) no-repeat;
color: transparent;
width: 28px;
height: 23px;
}
.social-icons ul li.tumblr a:before {
content: none;
}
.social-icons ul li.tumblr a:hover {
content: none;
background: url(http://www.asamariabradley.com/images/goodreadsgrey.png) no-repeat;
}
Any suggestions? (My site is at www.asamariabradley.com)
Please enable tumblr icon and notify me again. Right now you don’t have a tumblr link (Add Goodreads link there) selected therefor I can’t help you with that.
Hi Aigars,
Thanks for the quick reply.
My Goordreads URL was in the Tumblr social links field. I seems however that when I modified the $social_links array in the header-extensions.php file to say ‘Goodreads’ instead of ‘Tumblr’, the icon disappeared.
I did some more work this morning, including updating my theme files to the latest versions, and used a solution you suggested in a more recent forum topic (reply #16301).
My custom CSS now includes:
.social-icons ul li.rss a:before {
background: url('http://www.asamariabradley.com/images/goodreadsgrey.png') no-repeat;
color: transparent;
}
I went with the RSS icon instead of Tumblr because the orange hover color is closer to Goodreads color scheme than the dark blue Tumblr uses. 
The only problem I have now is that if I modify the $social_links array in the header-extensions.php file to say 'Goodreads' instead of 'RSS', my icon disappears again.
The only thing I can think of for that to happen is if ‘RSS’ is referenced in another file somewhere and I need to modify that call/command as well. Do you know if that’s the case, or am I doing something else wrong?
It’s not a huge deal, but it would be nice to have it say “Goodreads” instead of “RSS” when a person hovers over the icon.
Thanks again!
-Asa
Social icon title is also used in that function and renaming it will break it completely.
An easier method would be to create a links manually (hardcode it). Here is an example I posted on another thread.
Let me know if you need any further assistance with this.
Hello,
I’ve attempted to implement the above code and procedure on travelify, but I cannot see the tripadvisor icon. Is there any update to this workaround for the social link? Thank you.
Hi @kobzarm,
This thread is too old and to help keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/travelify-support/ instead of replying on others thread as it makes the thread messy and hard to read.
If you want to you can also add reference of this thread in your newly created thread.
We would be more than happy to help you on your new thread.
Thanks,
Movin
Hi, Is there a way I could share each photo not only on Pinterest but on facebook, google plus and twitter each photo on a post?
Here is the link Ilocano Love Quotes with English Captions - Learn Filipino … I have social media icons to share on facebook, google plus, and twitter but it shares the whole page with the featured image.
Adding a new social media icon for Travelify WordPress theme
Is there a way I could share each post from a post. Pinterest is picking the photo when shared but I would like to add facebook, twitter, and google plus to share each photo as well and not the url. I am using a plugin now but then I could not work out sharing individual photos on facebook, twitter or google plus.
Here is the link Ilocano Love Quotes with English Captions - Learn Filipino
Ok sorry… I got it wrong… So I created a separated topic for my first message.
Not an issue.