1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Unmaintained CSS3 Social Media Icons

CSS3 social media icons that look great for all screen resolutions

  1. DRE

    DRE Well-Known Member

    8thos submitted a new resource:

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

    Read more about this resource...
     
  2. Kintaro

    Kintaro Well-Known Member

    thank you!

    socialglyphs-webfont.tffis included in the medialoot zip!
     
    8thos likes this.
  3. DRE

    DRE Well-Known Member

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

    CyberAP Well-Known Member

    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.
     
    Shelley likes this.
  5. Andy.N

    Andy.N Well-Known Member

    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.
     
    8thos likes this.
  6. DRE

    DRE Well-Known Member

    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;
     
  7. Adam Howard

    Adam Howard Well-Known Member

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

    DRE Well-Known Member

    Did you skip Step 2 and 3?
     
  9. Adam Howard

    Adam Howard Well-Known Member

    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.
     
  10. DRE

    DRE Well-Known Member

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

    Adam Howard Well-Known Member

    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"
     
  12. DRE

    DRE Well-Known Member

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

    The icons are font and CSS
     
  13. Adam Howard

    Adam Howard Well-Known Member

    Yes, I just realized this. :confused:

    I'm having a blond moment. :p
     
    8thos likes this.
  14. DRE

    DRE Well-Known Member

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

    Adam Howard Well-Known Member

    Sleep?

    What is this sleep you speak of? It sounds nice. :p
     
  16. Adam Howard

    Adam Howard Well-Known Member

    So much better. :D

    Icons in the right, replacing icons in navigation

    www.sociallyuncensored.eu 2012-9-6 14:50:59.png
     
  17. DRE

    DRE Well-Known Member

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

    NinaMcI Active Member

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

    upload_2015-5-8_9-58-17.png

    Can anyone suggest why?

    Thanks
     
    upnet likes this.
  19. upnet

    upnet Active Member

    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.
     
  20. upnet

    upnet Active Member

    Changed font to font-awsome to solve problem.
     

Share This Page