Adding extra social media link icons Using CSS…help!

freewalkingtoursbarcelona · Member · Apr 15, 2015 at 3:19 pm
Copy link

Add topic to favorites
Hi, I never used CSS before but if someone could give me step by step instructions to help me with the following problem I’d be very grateful.

Here is my URL: http://freewalkingtoursbarcelona.com/
I’m using the Responsive theme

In the appearance – customize page I can add social media icons by copying the URL for my FB/Instagram, etc into the pre-prepared boxes. I then get a nice line of grey social media logo link icons across the bottom of my pages.

I want to add a link to my Trip Advisor page in this same line of icon-links.

As you’ll see, I have the HTML code for the Trip Advisor link icon and I’ve pasted it into the page editor, but the link looks out of place as it’s not at the bottom of the page with the other social media links.

The help lady at wordpress told me to post my problem on here… hopefully someone can help??

Also the Trip Advisor link logo is in colour… i’d love it if I could change the FB, Instagram, etc logos to colour too??

I know nothing about CSS, but I’m good at following instructions ;)

Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 16, 2015 at 4:02 pm
Copy link
I see from looking in the Customizer on Responsive that there are unused social media entries (Pinterest, Linkedin, etc.). You can add your additional social services to those (ignoring what they are labeled for) and then we can work on getting the icons correct. We use Genericons, and currently we do not support the entire set, so it could be that you will have to make, or find, icons to use.

If you can add your Trip Advisor link to one of the positions in the Customizer, I can see what I can do.
freewalkingtoursbarcelona · Member · Apr 17, 2015 at 7:31 am
Copy link
Thanks I’ve added the Trip Advisor link on the Stumble Upon Icon…

…what next?

Thanks!
thesacredpath · Member · Apr 17, 2015 at 6:05 pm
Copy link
The icons in Responsive are actual images, so I did a quick search and came up with this one, which is close: https://www.iconfinder.com/icons/167624/tripadvisor_icon#size=24 . Download that icon, upload it to your media library, get the URL of that image and replace URL_OF_IMAGE between the quote marks in the following CSS.
```
.stumble-upon-icon img {
    visibility: hidden;
}
.stumble-upon-icon a {
    background: url('URL_OF_IMAGE') no-repeat scroll center center #ddd;
    display: inline-block;
    height: 23px;
    width: 23px;
    border: 1px solid #a0a0a0;
    border-radius: 4px;
}
```
freewalkingtoursbarcelona · Member · Apr 22, 2015 at 2:43 pm
Copy link
Hi, thanks again for this. I’m a little confused and started checking the CSS info and it says I need to be a premium member to edit CSS.

Is that correct? If so, thanks for the help but I guess I’ll leave it for now
freewalkingtoursbarcelona · Member · Apr 22, 2015 at 3:12 pm
Copy link
Ahh, no I can do it.
So for editing the others into colour I do the same process, right?
The new CSS would read:

.google-+-icon img {
visibility: hidden;
}
.google-+-icon a {
background: url(‘https://freewalkingtoursbarcelona.files.wordpress.com/2015/04/1429578455_tripadvisor_v2-128-e1429715324196.png’) no-repeat scroll center center #ddd;
display: inline-block;
height: 28px;
width: 28px;
border: 1px solid #a0a0a0;
border-radius: 4px;
}

Right?
thesacredpath · Member · Apr 22, 2015 at 3:52 pm
Copy link
That is correct. You are on your way!
thesacredpath · Member · Apr 22, 2015 at 3:53 pm
Copy link
Actually I see you have gotten this accomplished. Awesome job and your icons look great!
freewalkingtoursbarcelona · Member · Apr 22, 2015 at 3:55 pm
Copy link
Thanks a million! :)
thesacredpath · Member · Apr 22, 2015 at 5:28 pm
Copy link
You are welcome.

No items found.