search

rodolfohernandez / RH-Writing-Website

This is a repository for hosting the current code for my website. For now, I'm working on the site every day, but I'm also learning HTML/CSS/JavaScript along the way. Feel free to check out the work,
1 stars 0 forks source link

Social Media Icons #5

Closed rodolfohernandez closed 8 years ago

rodolfohernandez commented 8 years ago

I'm leaving space in the code, but how should I handle this? Both VSCO and IG offer code to use:

IG <style>.ig-b- { display: inline-block; } .ig-b- img { visibility: hidden; } .ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; } .ig-b-16 { width: 16px; height: 16px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-16.png) no-repeat 0 0; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .ig-b-16 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-16@2x.png); background-size: 60px 178px; } }</style> <a href="https://www.instagram.com/rodolfo.eduardo/?ref=badge" class="ig-b- ig-b-16"><img src="//badges.instagram.com/static/images/ig-badge-16.png" alt="Instagram" /></a>

VSCO <a style="display: inline-block; border: 0; text-decoration: none;" href="http://vsco.co/rodolfohernandez?utm_source=user_grid&utm_medium=user_website&utm_campaign=link_to_grid"><img style="width: 16px; height: 16px; margin: 0px;" src="http://assets.vsco.co/assets/images/assets/Logo_black_16.png" alt="VSCO Logo" /></a>

Thinking we could just put images in the root folder and display these with an <a> tag.

rodolfohernandez commented 8 years ago

We're just going to use this code