CSS Social Media Icon

Developer
Danny C
Size
3,871 Kb
Views
16,192
  1. CSS Social Media Icon Previews
  2. CSS Social Media Icon HTML Codes
  3. CSS Social Media Icon CSS Codes

How do I make an css social media icon?

Should come in hand to keep retina-fied quality from now on. Be weary of a potentially "bloated" document, a big chunk of crap right in the document you're trying to author, and inability to cache.. What is a css social media icon? How do you make a css social media icon? This script and codes were developed by Danny C on 17 October 2022, Monday.

CSS Social Media Icon Previews
IQ Test

CSS Social Media Icon - Script Codes HTML Codes

<!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 Icon - Script Codes CSS Codes

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;
}
CSS Social Media Icon - Script Codes
CSS Social Media Icon - Script Codes
Home Page Home
Developer Danny C
Username tychoBlender
Uploaded October 17, 2022
Rating 3
Size 3,871 Kb
Views 16,192
Do you need developer help for CSS Social Media Icon?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Danny C (tychoBlender) Script Codes
Name
Animation Test
Single Page Layout
SOL Republic Styling Test
Outlook 2013 Line Height
Crossfade video Carousel
Toggle Object Width with jQuery
Navigation Transition
Embed Responsively
Headbands
Super Simple jQuery CrossFade
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!