Enfold > Theme Options > Header > Social Icon

Hi Ismael,

Thank you for the link.

1. As I understand it you are giving me two choices: YOUR method of editing custom.css and NICK’s more complex method. Correct?

2. In YOUR method, I use a jpg or png icon and in NICKS’s method I use a glyph. Is this correct?

3. Fontello does have an Apple icon. See here http://www.fontello.com/#search=apple

4. On the link you posted it shows many directions. Yours, Nicks – do steps 1-12 then, only do steps 5,9,11, etc. It seems to me the directions evolved over time and were edited. I am confused.

5. What is the easiest way to replace the “dribbble” glyph with this apple glyph? http://www.fontello.com/#search=apple

Thank you for your time, Jasmer

Yes Ismaels is much easier.

For Ismaels, I believe I need a png or jpg icon rather than a glyph. Is this correct?

If that is true then I would have to find the exact color icon correct? Or change it my self in photoshop to match the icons that come with the theme. Correct?

Thank you

To restate that last part:

Are these the full directions?

Don’t I need 2 icons? One for normal and one for hover? (apple.png and apple-hover.png)

Wouldn’t that change the second part of the code in the header.php? What would those code changes be?

Also, I want the square background to be black on hover not the Tumblr color background. What would the additional code changes be?

Thank you for your time,

Jasmer

Ismael, Ok almost there!

Just to be clear. I was assuming that I needed to use an “apple shaped” icon png on a transparency, one in white, one in grey.

It seems now you are telling me that I need an apple icon on a square grey background for the normal state.

And an apple icon on a square black background for the hover state.

SO both icons I make in photoshop should be square with the apple in the center.

Am I understanding correctly?

Thank you, Jasmer

Hi Devin, Ismael, Dude,

Devin’s last response confused me a bit because it was a bit general in nature. I am very close to understanding this. Let me restate. I’ll be very clear. Currently, I have a tumblr icon linked to my apple certification site with a blue background.

This is exactly what I want, no more no less:

1. Normal State: grey apple icon on enfold white? background.

2. Hover State: white apple icon on dark grey background.

Am I correct in understanding that I do this?:

1. Normal State: In Photoshop, create a 64px x 64px SQUARE png file (grey apple on an enfold white background)

2. Hover State: In Photoshop, create a 64px x 64px SQUARE png file (white apple on an enfold dark grey background)

Is this the specific and correct procedure for what I want? Is the enfold background perfectly white? FFFFFF?

Also, will 64px x 64px be enough to make this retina resolution?

Thank you for your time

Ok I’m using the square icons in the header but I get it. Thank you! I’ll give it a shot and get back to you.

Thanks Devin. I really appreciate it. I’m going to test now and get back to you. Thank you!

I should mention the apple.png is a transparency and the apple-hover.png has a solid grey background. Is it the transparency that is causing the issue?

Devin,

Thank you for your help. I have one more question and problem.

1. I actually had to do this. If I only used 2 entires then I end up with a weird distortion in my Apple icon. So I added the last line from the previous code. To result as this:

#top .social_bookmarks_tumblr a {

background: url(.......uploads/custom/apple.png) no-repeat center;

}



#top .social_bookmarks_tumblr a:hover {

color:#fff;

background: url(........uploads/custom/apple-hover.png) no-repeat center;

}



#top .social_bookmarks_tumblr a {

text-indent: -9999px;

}

2. I now have a retina resolution problem. When I view this on an iPhone 5 and my Macbook Pro Retina the apple icon is pixilated. Any ideas for a quick fix for this. If I do it as 64px x 64px then it looks to large. I imagine I have to add something to the CSS to constrain the proportion then upload the 64 x 64 images. Will you help me with that?

3. Would you mind going back through and deleting my personal links from this post. I abbreviated them above. Could you go back and abbreviate the others please?

Thank you again for your help!