• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
CSS3 Social Media Icons

CSS3 Social Media Icons

DRE

Well-known member
#1
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...
 

CyberAP

Well-known member
#4
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

Well-known member
#5
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

Well-known member
#6
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.

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

Well-known member
#9
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

Well-known member
#10
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

Well-known member
#11
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

Well-known member
#12
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
 

upnet

Active member
#19
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.