fight coronavirus(corvid-19) - As they treat the sick & find the solution, please stay at home + wash your hands every after activity, GOD bless you.
Animated Social Media Icons Using Font Awesome and Materialize CSS

First of all, having social media icons on your website or portfolio will enable users to seek further help from you(Basing on their Questions) or get to know you in person. Moreso, increasing your follower count on those different platforms linked on your site.

So in this simple post, I will provide with source code and video to teach you how to create simple attractive animated social media icons.

The live example is in the footer section, See how those social media icons look beautiful with that pulse effect. They can really trigger users to click on them.

To create these icons, I will use a modern responsive front-end framework based on Material Design(Materialize CSS) and the world's most popular and easiest to use icon toolkit based on CSS and LESS(Font Awesome).

Watch Tutorial
Font Awesome CDN Link

Note:: Keep on visiting the official page because always different versions are pushed or published out. Font Awesome Site language

copy
	
/*Font Awesome CDN*/
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Social Media Icon MarkUp

Note:: In the href attribute is where you put your social media profile link. For example href="https://facebook.com/YourUsername"

copy

<ul>
<li><a href="" class="btn-floating pulse indigo darken-3"><i class="fa fa-facebook"></i></a>Facebook</li>
<li><a href="" class="btn-floating pulse light-blue darken-3"><i class="fa fa-twitter"></i></a>Twitter</li>
<li><a href="" class="btn-floating pulse red darken-3"><i class="fa fa-youtube"></i></a> Youtube</li>
<li><a href="" class="btn-floating pulse brown darken-3"><i class="fa fa-instagram"></i></a>Instagram</li>
<li><a href="" class="btn-floating pulse light-blue darken-3"><i class="fa fa-linkedin"></i></a>LinkedIn</li>
</ul>
	

Download project files from here: Download description

I will always put out free content on my YouTube Channel, but showing your support, subscribing to it, pushes me and gives me motivation, not because of the money, but because it feels like people really appreciate what I do. SUBSCRIBE TO:: Oston Code Cypher

Related Post(s)

» Animated Social Media Icons Using Font Awesome and Materialize CSS

» How to style an hr element using CSS

» Learn how to create responsive images with CSS

» How to create a Fullscreen Background Video(Source Code)

» How do I wrap text in a pre tag?[SOLVED]

collections_bookmark Category :: Css
date_range Published :: 3 months ago At: 06:17 AM
event_note Detailed Date :: Dec 06th, 2019
person Writer :: Code

YOU MAY LIKE THESE POSTS

share