Skip to content

Instantly share code, notes, and snippets.

@isralduke

isralduke/icon_specific_style.scss

Last active December 8, 2015 16:29
Show Gist options
  • Save isralduke/a105792d733b40873d35 to your computer and use it in GitHub Desktop.
Save isralduke/a105792d733b40873d35 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Use Example (works in ie9, too)
Raw
icon_specific_style.scss
.svgdefs {
display: none;
}
.social-icon {
width: 24px; height: 24px;
display: inline-block;
}
.social-share {
fill: $iconColor;
margin-right: 8px;
&:hover, &:active {
fill: $iconColorHover;
}
}
.social-connect {
fill: $iconColor;
margin-left: 8px;
&:hover, &:active {
fill: $iconColorHover;
}
footer & {
&:hover, &:active {
fill: $iconColorFooter;
}
margin-top: -3px;
}
}
Raw
icons_from_svg_defs.php
<!-- the actual icons which are placed into PHP partial file for easy inclusion across pages -->
<span class="social-icon-label connect">connect</span>
<a class="social-icon" href="www.link.com" title="" target="_blank">
<svg class="social-icon social-connect">
<use xlink:href="#instagram"></use>
</svg>
</a>
<a class="social-icon" href="www.link.com" title="" target="_blank">
<svg class="social-icon social-connect">
<use xlink:href="#google"></use>
</svg>
</a>
<a class="social-icon" href="www.link.com" title="" target="_blank">
<svg class="social-icon social-connect">
<use xlink:href="#twitter"></use>
</svg>
</a>
<a class="social-icon" href="www.link.com" title="" target="_blank">
<svg class="social-icon social-connect">
<use xlink:href="#facebook"></use>
</svg>
</a>
Raw
svg4everybody.min.js
// <script src="js/svg4everybody.js"></script>
// get this here: https://github.com/jonathantneal/svg4everybody
!function(a,b){"function"==typeof define&&define.amd?define([],function(){return a.svg4everybody=b()}):"object"==typeof exports?module.exports=b():a.svg4everybody=b()}(this,function(){/*! svg4everybody v2.0.0 | github.com/jonathantneal/svg4everybody */
function a(a,b){if(b){var c=!a.getAttribute("viewBox")&&b.getAttribute("viewBox"),d=document.createDocumentFragment(),e=b.cloneNode(!0);for(c&&a.setAttribute("viewBox",c);e.childNodes.length;)d.appendChild(e.firstChild);a.appendChild(d)}}function b(b){b.onreadystatechange=function(){if(4===b.readyState){var c=document.createElement("x");c.innerHTML=b.responseText,b.s.splice(0).map(function(b){a(b[0],c.querySelector("#"+b[1].replace(/(\W)/g,"\\$1")))})}},b.onreadystatechange()}function c(c){function d(){for(var c,j,k=0;k<e.length;)if(c=e[k],j=c.parentNode,j&&/svg/i.test(j.nodeName)){var l=c.getAttribute("xlink:href");if(f&&(!g||g(l,j,c))){var m=l.split("#"),n=m[0],o=m[1];if(j.removeChild(c),n.length){var p=i[n]=i[n]||new XMLHttpRequest;p.s||(p.s=[],p.open("GET",n),p.send()),p.s.push([j,o]),b(p)}else a(j,document.getElementById(o))}}else k+=1;h(d,17)}c=c||{};var e=document.getElementsByTagName("use"),f="polyfill"in c?c.polyfill:/\bEdge\/12\b|\bTrident\/[567]\b|\bVersion\/7.0 Safari\b/.test(navigator.userAgent)||(navigator.userAgent.match(/AppleWebKit\/(\d+)/)||[])[1]<537,g=c.validate,h=window.requestAnimationFrame||setTimeout,i={};f&&d()}return c});
Raw
svg_defs.php
<!-- i place the SVG into a PHP partial file for easy inclusion across pages -->
<div class="svgdefs">
<svg viewBox="0 0 23 23">
<symbol id="facebook" viewBox="0 0 23 23">
<path id="facebook" d="M14.3145,11.499 L12.5075,11.499 L12.5075,18.045 L9.8005,18.045 L9.8005,11.499 L8.4455,11.499 L8.4455,9.243 L9.8005,9.243 L9.8005,7.89 C9.8005,6.05 10.5645,4.956 12.7335,4.956 L14.5415,4.956 L14.5415,7.212 L13.4125,7.212 C12.5675,7.212 12.5105,7.527 12.5105,8.114 L12.5075,9.243 L14.5525,9.243 L14.3145,11.499 Z M11.5005,0.001 C5.1485,0.001 0.0005,5.149 0.0005,11.501 C0.0005,17.852 5.1485,23 11.5005,23 C17.8515,23 23.0005,17.852 23.0005,11.501 C23.0005,5.149 17.8515,0.001 11.5005,0.001 L11.5005,0.001 Z" sketch:type="MSShapeGroup"></path>
</symbol>
<symbol id="google" viewBox="0 0 23 23">
<path id="google" d="M10.9053,13.0889 L10.7033,13.0889 C10.6713,13.0889 10.5943,13.0909 10.4753,13.0969 C10.3573,13.1029 10.2183,13.1139 10.0553,13.1299 C9.8923,13.1459 9.7203,13.1729 9.5373,13.2099 C9.3533,13.2479 9.1753,13.2939 9.0023,13.3489 C8.9153,13.3809 8.7943,13.4329 8.6363,13.5009 C8.4813,13.5709 8.3263,13.6729 8.1753,13.8019 C8.0233,13.9309 7.8913,14.0939 7.7773,14.2879 C7.6643,14.4839 7.6083,14.7259 7.6083,15.0179 C7.6083,15.6009 7.8633,16.0769 8.3793,16.4439 C8.8913,16.8109 9.5843,16.9949 10.4613,16.9949 C11.2373,16.9949 11.8313,16.8299 12.2343,16.5009 C12.6403,16.1709 12.8443,15.7519 12.8443,15.2439 C12.8443,15.0389 12.8073,14.8529 12.7373,14.6849 C12.6673,14.5179 12.5623,14.3539 12.4223,14.1909 C12.2803,14.0279 12.0973,13.8619 11.8713,13.6889 C11.6433,13.5169 11.3783,13.3209 11.0773,13.1059 C11.0113,13.0949 10.9543,13.0889 10.9053,13.0889 L10.9053,13.0889 Z M18.1133,8.3209 L18.1133,10.6249 L17.3853,10.6249 L17.3853,8.3209 L15.0813,8.3209 L15.0813,7.5929 L17.3853,7.5929 L17.3853,5.3249 L18.1133,5.3249 L18.1133,7.5929 L20.4053,7.5929 L20.4053,8.3209 L18.1133,8.3209 Z M12.5673,6.1939 C12.6973,6.3179 12.8223,6.4699 12.9413,6.6489 C13.0583,6.8259 13.1613,7.0339 13.2483,7.2729 C13.3343,7.5109 13.3783,7.7799 13.3783,8.0839 C13.3783,8.3859 13.3393,8.6529 13.2653,8.8789 C13.1883,9.1069 13.0863,9.3099 12.9573,9.4879 C12.8263,9.6669 12.6813,9.8279 12.5173,9.9749 C12.3563,10.1199 12.1883,10.2589 12.0173,10.3889 C11.9083,10.4969 11.8043,10.6099 11.7093,10.7299 C11.6113,10.8479 11.5623,11.0009 11.5623,11.1839 C11.5623,11.3679 11.6113,11.5109 11.7093,11.6119 C11.8043,11.7169 11.8963,11.8059 11.9843,11.8819 L12.5673,12.3369 C12.7403,12.4869 12.9103,12.6399 13.0783,12.7899 C13.2463,12.9429 13.3903,13.1049 13.5143,13.2779 C13.6393,13.4509 13.7403,13.6459 13.8163,13.8619 C13.8903,14.0769 13.9293,14.3259 13.9293,14.6089 C13.9293,14.9869 13.8363,15.3599 13.6543,15.7279 C13.4693,16.0959 13.2013,16.4229 12.8443,16.7099 C12.4863,16.9959 12.0413,17.2299 11.5063,17.4089 C10.9703,17.5849 10.3573,17.6749 9.6683,17.6749 C9.0833,17.6749 8.5723,17.6099 8.1353,17.4819 C7.6973,17.3509 7.3323,17.1789 7.0423,16.9629 C6.7483,16.7459 6.5333,16.5009 6.3923,16.2259 C6.2523,15.9499 6.1813,15.6599 6.1813,15.3579 C6.1813,15.0669 6.2713,14.7349 6.4493,14.3619 C6.6293,13.9889 6.9553,13.6619 7.4293,13.3809 C7.6783,13.2299 7.9453,13.1079 8.2323,13.0169 C8.5193,12.9249 8.8003,12.8509 9.0833,12.7969 C9.3643,12.7429 9.6273,12.7049 9.8773,12.6849 C10.1263,12.6629 10.3413,12.6459 10.5253,12.6359 C10.4063,12.4839 10.2953,12.3249 10.1933,12.1569 C10.0913,11.9889 10.0393,11.7819 10.0393,11.5319 C10.0393,11.3939 10.0553,11.2769 10.0883,11.1849 C10.1193,11.0929 10.1583,10.9989 10.2013,10.9009 C10.1153,10.9119 10.0283,10.9199 9.9413,10.9249 C9.8553,10.9309 9.7683,10.9339 9.6813,10.9339 C9.2503,10.9339 8.8663,10.8599 8.5323,10.7139 C8.1963,10.5689 7.9153,10.3769 7.6893,10.1399 C7.4623,9.9009 7.2893,9.6289 7.1703,9.3209 C7.0523,9.0129 6.9933,8.7019 6.9933,8.3899 C6.9933,8.0109 7.0803,7.6299 7.2523,7.2449 C7.4233,6.8629 7.6823,6.5199 8.0293,6.2179 C8.4943,5.8389 8.9813,5.5969 9.4963,5.4879 C10.0103,5.3799 10.4863,5.3249 10.9303,5.3249 L14.2693,5.3249 L13.2313,5.8929 L12.2283,5.8929 C12.3243,5.9699 12.4373,6.0689 12.5673,6.1939 L12.5673,6.1939 Z M12.0523,0.0009 C5.7013,0.0009 0.5523,5.1499 0.5523,11.5009 C0.5523,17.8519 5.7013,22.9999 12.0523,22.9999 C18.4043,22.9999 23.5523,17.8519 23.5523,11.5009 C23.5523,5.1499 18.4043,0.0009 12.0523,0.0009 L12.0523,0.0009 Z M11.4323,6.9019 C11.2603,6.5989 11.0463,6.3469 10.7913,6.1459 C10.5393,5.9439 10.2453,5.8449 9.9093,5.8449 C9.6923,5.8449 9.4823,5.8939 9.2773,5.9909 C9.0723,6.0889 8.9043,6.2189 8.7733,6.3819 C8.6353,6.5549 8.5393,6.7439 8.4903,6.9499 C8.4433,7.1559 8.4193,7.3679 8.4193,7.5849 C8.4193,7.8569 8.4583,8.1589 8.5393,8.4949 C8.6213,8.8319 8.7453,9.1459 8.9133,9.4399 C9.0783,9.7319 9.2913,9.9779 9.5453,10.1789 C9.7983,10.3799 10.0983,10.4799 10.4433,10.4799 C10.6493,10.4799 10.8513,10.4369 11.0513,10.3489 C11.2523,10.2629 11.4183,10.1529 11.5463,10.0249 C11.7303,9.8399 11.8443,9.6339 11.8863,9.4049 C11.9303,9.1789 11.9513,8.9889 11.9513,8.8369 C11.9513,8.5439 11.9083,8.2239 11.8223,7.8779 C11.7343,7.5299 11.6053,7.2049 11.4323,6.9019 L11.4323,6.9019 Z" sketch:type="MSShapeGroup"></path>
</symbol>
<symbol id="twitter" viewBox="0 0 23 23">
<path id="twitter" d="M17.9512,11.7979 C16.6272,17.1649 7.7482,19.4409 3.6662,13.8689 C5.2282,15.3629 7.9552,15.4959 9.6802,13.7079 C8.6682,13.8579 7.9302,12.8619 9.1762,12.3249 C8.0562,12.4459 7.4352,11.8529 7.1802,11.3459 C7.4412,11.0709 7.7302,10.9429 8.2912,10.9059 C7.0652,10.6159 6.6132,10.0179 6.4742,9.2889 C6.8142,9.2079 7.2402,9.1379 7.4712,9.1689 C6.3992,8.6089 6.0252,7.7629 6.0862,7.1279 C8.0032,7.8409 9.2242,8.4129 10.2462,8.9609 C10.6092,9.1549 11.0172,9.5059 11.4752,9.9499 C12.0582,8.4059 12.7802,6.8159 14.0132,6.0269 C13.9942,6.2059 13.8972,6.3719 13.7692,6.5089 C14.1222,6.1899 14.5762,5.9709 15.0392,5.9069 C14.9862,6.2549 14.4852,6.4499 14.1832,6.5639 C14.4122,6.4919 15.6272,5.9499 15.7602,6.2609 C15.9162,6.6109 14.9222,6.7729 14.7522,6.8339 C14.6272,6.8759 14.5002,6.9229 14.3752,6.9739 C15.9152,6.8189 17.3852,8.0909 17.8122,9.6679 C17.8442,9.7819 17.8752,9.9079 17.9042,10.0399 C18.4672,10.2509 19.4862,10.0299 19.8162,9.8269 C19.5772,10.3909 18.9592,10.8049 18.0492,10.8799 C18.4862,11.0639 19.3142,11.1639 19.8852,11.0669 C19.5242,11.4549 18.9412,11.8059 17.9512,11.7979 M11.7762,0.0009 C5.4262,0.0009 0.2762,5.1499 0.2762,11.5009 C0.2762,17.8519 5.4262,22.9999 11.7762,22.9999 C18.1272,22.9999 23.2762,17.8519 23.2762,11.5009 C23.2762,5.1499 18.1272,0.0009 11.7762,0.0009" sketch:type="MSShapeGroup"></path>
</symbol>
<symbol id="instagram" viewBox="0 0 23 23">
<path id="instagram" d="M12.3291,14.0479 C13.7361,14.0479 14.8771,12.9069 14.8771,11.4999 C14.8771,10.0929 13.7361,8.9529 12.3291,8.9529 C10.9241,8.9529 9.7821,10.0929 9.7821,11.4999 C9.7821,12.9069 10.9241,14.0479 12.3291,14.0479 L12.3291,14.0479 Z M16.9151,6.4049 L15.3871,6.4049 C15.1041,6.4049 14.8771,6.6339 14.8771,6.9149 L14.8771,8.4439 C14.8771,8.7249 15.1041,8.9529 15.3871,8.9529 L16.9151,8.9529 C17.1961,8.9529 17.4241,8.7249 17.4241,8.4439 L17.4241,6.9149 C17.4241,6.6339 17.1961,6.4049 16.9151,6.4049 L16.9151,6.4049 Z M16.4051,11.4999 C16.4051,13.7509 14.5801,15.5749 12.3291,15.5749 C10.0781,15.5749 8.2541,13.7509 8.2541,11.4999 C8.2541,11.1479 8.3041,10.8069 8.3891,10.4819 L7.2341,10.4819 L7.2341,16.0849 C7.2341,16.3659 7.4621,16.5939 7.7451,16.5939 L16.9151,16.5939 C17.1961,16.5939 17.4241,16.3659 17.4241,16.0849 L17.4241,10.4819 L16.2711,10.4819 C16.3551,10.8069 16.4051,11.1479 16.4051,11.4999 L16.4051,11.4999 Z M18.9511,16.5939 C18.9511,17.4389 18.2681,18.1229 17.4241,18.1229 L7.2341,18.1229 C6.3911,18.1229 5.7071,17.4389 5.7071,16.5939 L5.7071,6.4049 C5.7071,5.5619 6.3911,4.8779 7.2341,4.8779 L17.4241,4.8779 C18.2681,4.8779 18.9511,5.5619 18.9511,6.4049 L18.9511,16.5939 Z M12.3291,0.0009 C5.9771,0.0009 0.8291,5.1499 0.8291,11.5009 C0.8291,17.8519 5.9771,22.9999 12.3291,22.9999 C18.6801,22.9999 23.8291,17.8519 23.8291,11.5009 C23.8291,5.1499 18.6801,0.0009 12.3291,0.0009 L12.3291,0.0009 Z" sketch:type="MSShapeGroup"></path>
</symbol>
<symbol id="email" viewBox="0 0 23 23" >
<path id="email" d="M23,11.5 C23,17.85 17.852,22.998 11.5,22.998 C5.148,22.998 0,17.85 0,11.5 C0,5.148 5.148,0 11.5,0 C17.852,0 23,5.148 23,11.5" id="Fill-1" sketch:type="MSShapeGroup"></path>
<path d="M13.008,14.389 L11.923,15.256 L10.832,14.395 L4,9 L4,16.522 L19.75,16.522 L19.75,9.01 L13.008,14.389 Z M19.75,7 L4,7 L11.917,13.25 L19.75,7 Z" id="Fill-3" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
</symbol>
</svg>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment