Font Awesome Social Icon List

Developer
Marty Powell
Size
2,556 Kb
Views
26,312
  1. Font Awesome Social Icon List Previews
  2. Font Awesome Social Icon List HTML Codes
  3. Font Awesome Social Icon List CSS Codes

How do I make an font awesome social icon list?

What is a font awesome social icon list? How do you make a font awesome social icon list? This script and codes were developed by Marty Powell on 15 September 2022, Thursday.

Font Awesome Social Icon List Previews
IQ Test

Font Awesome Social Icon List - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Font Awesome Social Icon List</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="social-media-list"> <li> <a href="#"> <i class="fa fa-codepen fa-5x"></i> </a> </li> <li> <a href="#"> <i class="fa fa-github fa-5x"></i> </a> </li> <li> <a href="#"> <i class="fa fa-instagram fa-5x"></i> </a> </li> <li> <a href="#"> <i class="fa fa-linkedin fa-5x"></i> </a> </li> <li> <a href="#"> <i class="fa fa-pinterest fa-5x"></i> </a> </li> <li> <a href="#"> <i class="fa fa-twitter fa-5x"></i> </a> </li> <li> <a href="#"> <i class="fa fa-stack-overflow fa-5x"></i> </a> </li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Font Awesome Social Icon List - Script Codes CSS Codes

a { color: rgba(0, 14, 40, 0.8);
}
body { padding: 40px;
}
.social-media-list { background: url(https://subtlepatterns.com/patterns/symphony.png); list-style-type: none; margin: 0; padding: 20px; display: flex; /* Then we define the flow direction and if we allow the items to wrap * Remember this is the same as: * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row no-wrap; /* Then we define how is distributed the remaining space */ justify-content: space-around;
}
.social-media-list li { overflow-y: hidden; position: relative;
}
.social-media-list li i { padding: 10px 0;
}
.social-media-list li i:hover { border-bottom: 5px solid gold; padding-bottom: 5px;
}
.social-media-list li a:hover span { background: rgba(0, 14, 40, 0.8); color: white;
}
.social-media-list li span { display: block; padding: 10px; text-align: center;
}
.social-media-list li span:hover { display: block;
}
Font Awesome Social Icon List - Script Codes
Font Awesome Social Icon List - Script Codes
Home Page Home
Developer Marty Powell
Username martypowell
Uploaded September 15, 2022
Rating 3
Size 2,556 Kb
Views 26,312
Do you need developer help for Font Awesome Social Icon List?

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!

Marty Powell (martypowell) Script Codes
Name
Ellipsis Animation
CSS Animation Grayscale to Color Photo
Disclaimer
About Me
Side Navigation
A Pen by Marty Powell
Animated Skip Nav
JQuery Tabs
Donation Bar
Slick Carousel Prototype
Create amazing art & images 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!