DEV Community

Cover image for CSS Social Media Icons
Free Webmasters
Free Webmasters

Posted on

CSS Social Media Icons

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

👉 Source & Preview: https://scriptcodes.co/css-social-media-icon-ahbur

Top comments (5)

Collapse
 
lexlohr profile image
Alex Lohr

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.

Collapse
 
w7freedownload profile image
Free Webmasters

Thanks, Alex.

Collapse
 
stephanreynolds profile image
Stephan Reynolds ✪

Great lesson, you got my follow, keep writing!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

That's... SVG?

Collapse
 
xanwtf profile image
Xan

Website has malware pop ups about “your phone is infected!”