5
CSS Social Media Icons
source link: https://dev.to/w7freedownload/css-social-media-icons-13oh
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
DEV Community 👩💻👨💻
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK