Stacked FontAwesome Icons Test
How do I make an stacked fontawesome icons test?
What is a stacked fontawesome icons test? How do you make a stacked fontawesome icons test? This script and codes were developed by Jennifer Tso on 19 December 2022, Monday.
Stacked FontAwesome Icons Test - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Stacked FontAwesome Icons Test</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- <span class="fa-stack fa-2x"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-facebook-square fa-stack-1x"></i>
</span> -->
<span class="fa-stack"> <i class="fa fa-square fa-stack fa-stack-1x"></i> <i class="fa fa-facebook-square fa-stack-1x"></i>
</span>
<span class="fa-stack"> <i class="fa fa-square fa-stack fa-stack-1x"></i> <i class="fa fa-linkedin-square fa-stack-1x"></i>
</span>
</body>
</html>
Stacked FontAwesome Icons Test - Script Codes CSS Codes
/* .fa-facebook-square { color: #09d;
}
.fa-square { color: #ff;
} */
.fa-stack-1x{ color:#fff;
}
.icon-facebook { color:#3b5998;
}
/* i.fa-stack-white { color: white; font-size: 32px;
} */
i.fa-square {color: #fff; font-size:32px; margin-bottom: 1px; margin-left: 1px;}
span > i:nth-child(2) {font-size: 32px; color: black}
span > i:nth-child(2):hover {color: pink}
/* .fa-facebook:hover { background: #fff;
}
.fa-square-o:hover { color: #e5e5e5; background: #09d;
} */
Developer | Jennifer Tso |
Username | jen188 |
Uploaded | December 19, 2022 |
Rating | 3 |
Size | 1,694 Kb |
Views | 6,072 |
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!
Name | Size |
Foundation 6 Tabs and Equalizer Issues | 2,655 Kb |
A Pen by Jennifer Tso | 4,905 Kb |
Foundation 6 Mega Menu | 2,953 Kb |
Owl Carousel 2 Autoplay and URL Hash Nav Conflict | 3,565 Kb |
REP F6 Small Overriding Large Breakpoint | 4,945 Kb |
F6 Overlay Menu | 2,699 Kb |
Print Worksheet Alignment Issue | 3,770 Kb |
Simple Phone Number Picker | 1,908 Kb |
Foundation 6 Callout Margin Adjustment | 2,533 Kb |
Parallax Fixed Counter | 2,968 Kb |
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!
Name | Username | Size |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
Funny menu | AxeLVaisper | 4,671 Kb |
Add This API | ThatGuySam | 2,848 Kb |
Flying Bee | Pwsm50 | 3,711 Kb |
Speech bubbles | Something | 1,547 Kb |
CSS Social Media Icon | TychoBlender | 3,871 Kb |
Scrolling Horizontal Isotope | Bramus | 2,017 Kb |
SVG Text Masking | JMChristensen | 2,141 Kb |
RequestAnimationFrame | Martin-banks | 2,541 Kb |
Update CSS Variables with JS | Wesbos | 2,335 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!