What is a css social media icon, How do you make a css social media icon?
CSS Social Media Icons HTML Code:
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Social Media Icon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Social Media Icon SVG Code</h1>
<p>SVG markup exported from Illustrator CC v17.1.0</p>
<small>Should be all retinafied across the board. Hoping to take note of which browsers don't support this too well.</small>
<div class="logo">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 266.9 266.9" enable-background="new 0 0 266.9 266.9" xml:space="preserve" width="35" height="35">
<path id="Blue_1_" fill="#3C5A99" d="M252.2,266.9c8.1,0,14.7-6.6,14.7-14.7V14.7c0-8.1-6.6-14.7-14.7-14.7H14.7C6.6,0,0,6.6,0,14.7 v237.4c0,8.1,6.6,14.7,14.7,14.7H252.2z"/>
<path id="f" fill="#FFFFFF" d="M184.2,266.9V163.5h34.7l5.2-40.3h-39.9V97.5c0-11.7,3.2-19.6,20-19.6l21.3,0v-36 c-3.7-0.5-16.4-1.6-31.1-1.6c-30.8,0-51.8,18.8-51.8,53.2v29.7h-34.8v40.3h34.8v103.4H184.2z"/>
</svg></svg>
</div>
<p>'F' Logo @ 35x35</p>
<div class="logo"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 273.4 222.2" enable-background="new 0 0 273.4 222.2" xml:space="preserve" height="35" width="44">
<path fill="#5FA9DD" d="M273.4,26.3c-10.1,4.5-20.9,7.5-32.2,8.8c11.6-6.9,20.5-17.9,24.7-31C255,10.5,243,15.2,230.2,17.7 C220,6.8,205.4,0,189.3,0c-31,0-56.1,25.1-56.1,56.1c0,4.4,0.5,8.7,1.5,12.8C88,66.5,46.7,44.2,19,10.3c-4.8,8.3-7.6,17.9-7.6,28.2 c0,19.5,9.9,36.6,25,46.7c-9.2-0.3-17.8-2.8-25.4-7c0,0.2,0,0.5,0,0.7c0,27.2,19.3,49.8,45,55c-4.7,1.3-9.7,2-14.8,2 c-3.6,0-7.1-0.4-10.6-1c7.1,22.3,27.9,38.5,52.4,39c-19.2,15-43.4,24-69.7,24c-4.5,0-9-0.3-13.4-0.8c24.8,15.9,54.3,25.2,86,25.2 c103.2,0,159.6-85.5,159.6-159.6c0-2.4-0.1-4.9-0.2-7.3C256.4,47.4,265.9,37.5,273.4,26.3z"/>
</svg>
</div>
<p>Twitter Logo Blue @ 35x35</p>
<div class="logo"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 113.4 113.4" enable-background="new 0 0 113.4 113.4" xml:space="preserve" height="35" width="35">
<g> <defs> <rect id="SVGID_1_" width="113.4" height="113.4"/> </defs> <clipPath id="SVGID_2_"> <use xlink:href="#SVGID_1_" overflow="visible"/> </clipPath> <path clip-path="url(#SVGID_2_)" fill-rule="evenodd" clip-rule="evenodd" fill="#595959" d="M100.1,47.9h-9.9 c0.7,2.8,1.1,5.7,1.1,8.7c0,19.2-15.6,34.8-34.8,34.8c-19.2,0-34.8-15.6-34.8-34.8c0-3,0.4-5.9,1.1-8.7h-9.9v47.9 c0,2.4,2,4.3,4.4,4.3h78.4c2.4,0,4.4-1.9,4.4-4.3V47.9z M100.1,17.4c0-2.4-2-4.4-4.4-4.4H82.7c-2.4,0-4.4,2-4.4,4.4v13.1 c0,2.4,1.9,4.4,4.4,4.4h13.1c2.4,0,4.4-2,4.4-4.4V17.4z M56.6,34.8c-12,0-21.8,9.7-21.8,21.8c0,12,9.7,21.8,21.8,21.8 s21.8-9.7,21.8-21.8C78.4,44.6,68.6,34.8,56.6,34.8 M100.1,113.2H13.1c-7.2,0-13.1-5.8-13.1-13.1V13.1C0,5.8,5.8,0,13.1,0h87.1 c7.2,0,13.1,5.8,13.1,13.1v87.1C113.2,107.3,107.3,113.2,100.1,113.2"/>
</g>
</svg>
</div>
<p>Instagram @ 35x35</p>
<div class="logo"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 328.5 385.1" enable-background="new 0 0 328.5 385.1" xml:space="preserve" height="35" width="30">
<g> <path fill="#FFFFFF" d="M31.1,276.6C13.9,276.6,0,262.6,0,245.5l0-95.2c0-17.1,13.9-31.1,31.1-31.1c8.3,0,16.1,3.2,22,9.1 c5.9,5.9,9.1,13.7,9.1,22l0,95.2c0,8.3-3.2,16.1-9.1,22C47.2,273.3,39.4,276.6,31.1,276.6"/> <path fill="#FFFFFF" d="M31.1,127.5c-12.6,0-22.7,10.2-22.7,22.7l0,95.2c0,12.6,10.2,22.7,22.7,22.8c12.6,0,22.7-10.2,22.7-22.8 l0-95.2C53.8,137.7,43.6,127.5,31.1,127.5"/> <path fill="#FFFFFF" d="M275,132.2l-8.4,0l-204.8,0l-8.4,0l0-8.4c0-34.3,18.7-66.2,49.3-85.1L90.8,17.1c-1.5-2.5-1.8-5.8-1-8.7 c0.9-2.9,2.9-5.5,5.6-6.9C97.1,0.5,99,0,100.9,0c4.2,0,8.1,2.3,10.1,6l12.5,22.7c12.9-4.7,26.5-7.1,40.6-7.1 c14.3,0,28,2.4,40.9,7.2L217.4,6c2-3.7,5.9-6,10.1-6c1.9,0,3.8,0.5,5.5,1.4c2.8,1.5,4.8,4,5.6,7c0.9,3,0.5,6.1-1,8.8l-11.9,21.7 c30.6,18.9,49.3,50.8,49.3,85.1L275,132.2z"/> <path fill="#FFFFFF" d="M214.4,42l15.9-29c0.8-1.5,0.3-3.5-1.2-4.3c-1.6-0.8-3.5-0.3-4.3,1.3l-16,29.3c-13.5-6-28.6-9.4-44.5-9.3 c-15.9,0-31,3.3-44.4,9.3l-16-29.2c-0.8-1.5-2.8-2.1-4.3-1.3c-1.5,0.8-2.1,2.8-1.3,4.3l15.9,29c-31.2,16.1-52.3,46.7-52.3,81.9 l204.8,0C266.6,88.7,245.6,58.1,214.4,42 M117.6,86.8c-4.7,0-8.6-3.8-8.6-8.6c0-4.7,3.8-8.6,8.6-8.6c4.7,0,8.6,3.9,8.6,8.6 C126.2,82.9,122.4,86.8,117.6,86.8 M210.9,86.8c-4.7,0-8.6-3.8-8.6-8.6c0-4.7,3.8-8.6,8.6-8.6c4.7,0,8.6,3.9,8.6,8.6 C219.5,82.9,215.6,86.8,210.9,86.8"/> <path fill="#FFFFFF" d="M126.2,385.1c-17.1,0-31.1-13.9-31.1-31.1l0-42l-8.2,0c-8.7,0-16.9-3.4-23.1-9.5 c-6.2-6.2-9.6-14.3-9.5-23.1l0-147.5l0-8.4l8.4,0l203.3,0l8.4,0l0,8.4l0,147.5c0,18-14.6,32.6-32.6,32.6l-8.2,0l0,42 c0,17.1-13.9,31.1-31.1,31.1c-8.3,0-16.1-3.2-22-9.1c-5.9-5.9-9.1-13.7-9.1-22l0-42l-14,0v42C157.3,371.1,143.3,385.1,126.2,385.1" /> <path fill="#FFFFFF" d="M62.7,279.3c0,13.4,10.8,24.3,24.3,24.3l16.5,0l0,50.4c0,12.5,10.2,22.7,22.7,22.7 c12.6,0,22.7-10.2,22.7-22.8l0-50.4l30.7,0l0,50.4c0,12.5,10.2,22.7,22.7,22.7c12.6,0,22.7-10.2,22.7-22.7l0-50.4l16.6,0 c13.4,0,24.3-10.9,24.3-24.3l0-147.6l-203.3,0L62.7,279.3z"/> <path fill="#FFFFFF" d="M297.4,276.5c-17.1,0-31.1-13.9-31.1-31.1l0-95.2c0-17.2,13.9-31.1,31.1-31.1c17.2,0,31.1,13.9,31.1,31.1 l0,95.2C328.5,262.6,314.6,276.5,297.4,276.5"/> <path fill="#FFFFFF" d="M297.4,127.5c-12.6,0-22.7,10.2-22.7,22.7l0,95.2c0,12.6,10.2,22.7,22.7,22.7c12.6,0,22.7-10.2,22.7-22.7 l0-95.2C320.1,137.7,310,127.5,297.4,127.5"/> <path fill="#A4C439" d="M31.1,127.5c-12.6,0-22.7,10.2-22.7,22.7l0,95.2c0,12.6,10.2,22.7,22.7,22.7c12.6,0,22.7-10.2,22.7-22.7 l0-95.2C53.8,137.7,43.6,127.5,31.1,127.5 M214.4,42l15.9-29c0.8-1.5,0.3-3.4-1.2-4.3c-1.5-0.8-3.5-0.3-4.3,1.3l-16,29.3 c-13.5-6-28.6-9.4-44.6-9.4c-15.9,0-31,3.3-44.4,9.3l-16-29.2c-0.8-1.5-2.8-2.1-4.3-1.3c-1.5,0.8-2.1,2.8-1.3,4.3l15.9,29 c-31.2,16.1-52.3,46.7-52.3,81.9l204.8,0C266.6,88.7,245.6,58.1,214.4,42 M117.6,86.8c-4.7,0-8.6-3.8-8.6-8.6 c0-4.7,3.8-8.6,8.6-8.6c4.7,0,8.6,3.9,8.6,8.6C126.2,82.9,122.4,86.8,117.6,86.8 M210.9,86.8c-4.7,0-8.6-3.8-8.6-8.6 c0-4.7,3.8-8.6,8.6-8.6c4.7,0,8.6,3.9,8.6,8.6C219.5,82.9,215.6,86.8,210.9,86.8 M62.6,131.8l0,147.6c0,13.4,10.8,24.3,24.3,24.3 l16.5,0l0,50.4c0,12.5,10.2,22.7,22.7,22.7c12.6,0,22.7-10.2,22.7-22.8l0-50.4l30.7,0l0,50.4c0,12.5,10.2,22.7,22.7,22.7 c12.6,0,22.7-10.2,22.7-22.7l0-50.4l16.6,0c13.4,0,24.3-10.8,24.3-24.3l0-147.6L62.6,131.8z M320.2,150.2 c0-12.6-10.2-22.7-22.7-22.7c-12.6,0-22.7,10.2-22.7,22.7l0,95.2c0,12.6,10.2,22.7,22.7,22.7c12.6,0,22.7-10.2,22.7-22.7 L320.2,150.2z"/>
</g>
</svg>
</div>
<p>Android @ 30x35</p>
</body>
</html>
CSS Social Media Icons CSS Code:
body { background-color:#e9eaee; color:#4e5665; font: normal 1em/1em "freight-sans-pro", 'lucida grande', tahoma, verdana, arial, sans-serif; text-align:center;
}
small{ display:block; padding:1.5em 0;
}
.logo{ display:inline;
}
👉 Source & Preview: https://scriptcodes.co/css-social-media-icon-ahbur
Top comments (5)
You could have used an SVG background or a ::before image data content in order to make this the CSS solution that you had advertised in the title. You used SVG. Slightly disappointing. You'll also find a collection of optimized SVG icons for social media here: github.com/larsenwork/web.svg.min.
Thanks, Alex.
Great lesson, you got my follow, keep writing!
That's... SVG?
Website has malware pop ups about “your phone is infected!”