CSS3 Social Media Icons

[DRE]

8thos submitted a new resource:

CSS3 Social Media Icons (version 1.0) - CSS3 social media icons that look great for all screen resolutions

CSS3 Social Media Icons are social networking icons that you can put anywhere on your site but for the purpose of this resource we will put them on the upper right side of your header. These icons are not image files but simply custom font and CSS padding made to look like Social Networking Icons. This means when you zoom in on the icons or look at them from a high-resolution display, they will be crisp and clean no matter what the size. They might not work in all browsers though, just most....

Read more about this resource...

 

[Kintaro]

thank you!

socialglyphs-webfont.tffis included in the medialoot zip!

 

[DRE]

thank you!

socialglyphs-webfont.tffis included in the medialoot zip!

True but it didn't work on my server for some odd reason that's why I added that extra step.

 

[CyberAP]

Nice guide, you also can use svg as icons, that'll decrease server requests and you won't need to worry about font smoothering and pixel-perfect graphics.

 

[Andy.N]

Nice guide, you also can use svg as icons, that'll decrease server requests and you won't need to worry about font smoothering and pixel-perfect graphics.

Do you have SVG icons for these?
IFAIK, you have to resize the svg images while in this case, you just use CSS to change the sizes.

 

[DRE]

Do you have SVG icons for these?
IFAIK, you have to resize the svg images while in this case, you just use CSS to change the sizes.

Yep! To resize the images and text (icons) play around with this part of the CSS code.

    width:20px;
    height:20px;
    font-family: 'Conv_socialglyphs-webfont';
    font-weight: 100;
    font-size:15px;
    line-height:1.5;
    text-align: center;

 

[Adam Howard]

Noticed in step 1 you had use download the icons, but never told us where to put them

 

[DRE]

Noticed in step 1 you had use download the icons, but never told us where to put them

Did you skip Step 2 and 3?

 

[Adam Howard]

Did you skip Step 2 and 3?

I haven't yet applied it because I couldn't figure out where to put the images....

I have guess that they go into the font folder, but reviewing your code, it doesn't exactly say X image is here and so is Y image.

 

[DRE]

I haven't yet applied it because I couldn't figure out where to put the images....

I have guess that they go into the font folder, but reviewing your code, it doesn't exactly say X image is here and so is Y image.

There are no images. The colored box is CSS3. The icons in the middle is the custom font-type.

 

[Adam Howard]

There are no images. The colored box is CSS3. The icons in the middle is the custom font-type.

OK. So the only point was to download package 1 so that I could convert that font into package 2 and not use the photos in there?!?

This is why I hate css .... Oh I love the design it offers, but...

html
hml5
php
mysql

everything else clearly states 1 + 1 = 2. You can find X in location Y.

But with CSS3 is a little like magic. Things just "are"

 

[DRE]

OK. So the only point was to download package 1 so that I could convert that font into package 2 and not use the photos in there?!?

This is why I hate css .... Oh I love the design it offers, but...

html
hml5
php
mysql

everything else clearly states 1 + 1 = 2. You can find X in location Y.

But with CSS3 is a little like magic. Things just "are"

There... are... no... photos/images for the Social Icons. Not in that package or the converted package.

The icons are font and CSS

 

[Adam Howard]

There... are... no... photos/images for the Social Icons. Not in that package or the converted package.

The icons are font and CSS

Yes, I just realized this.

I'm having a blond moment.

 

[DRE]

You need more sleep! Posts like CyberAP's that mention images might throw people off. This modification has no images.

 

[Adam Howard]

You need more sleep! Posts like CyberAP's that mention images might throw people off. This modification has no images.

Sleep?

What is this sleep you speak of? It sounds nice.

 

[Adam Howard]

So much better.

Icons in the right, replacing icons in navigation

 

[DRE]

Yeah that's pretty cool. Try viewing it from a phone.

 

[NinaMcI]

Hi,
Thanks for this. However, having followed the instructions, I'm getting this:



Can anyone suggest why?

Thanks

 

[upnet]

I was using this resource to add twitter and facebook to my header. This month I noticed the icons don't seem to be working. Did something change with the codes? I have the B and A lke the one above. On mobile it still is working well.

 

[upnet]

Changed font to font-awsome to solve problem.