social media icons Archives - csshint - A designer hub https://csshint.com/tag/social-media-icons/ Sun, 19 Feb 2023 11:19:05 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.4 How to create Social Media Icons using HTML CSS ? https://csshint.com/how-to-create-social-media-icons-using-html-css/ Sat, 01 Oct 2022 15:29:08 +0000 https://csshint.com/?p=7800 Today In this article, we are learning how to Create Social Media icons using HTML And Css. Note: You can add Social Media icons as images( SVG, PNG ) or Font icon like, bootstrap icon, material icon and Font awesome icon. In this article, i will show you how to crate social media icon using […]

The post How to create Social Media Icons using HTML CSS ? appeared first on csshint - A designer hub.

]]> Today In this article, we are learning how to Create Social Media icons using HTML And Css.

Note: You can add Social Media icons as images( SVG, PNG ) or Font icon like, bootstrap icon, material icon and Font awesome icon. In this article, i will show you how to crate social media icon using font awesome. let’s started.

Step 1: first we need to add (Font Awesome Icons) the following CDN link insidesection.

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

Step 2: Add HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>

<h2>Social Media Buttons Examples</h2>

<!-- Add font awesome icons -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-snapchat-ghost"></a>
<a href="#" class="fa fa-skype"></a>
<a href="#" class="fa fa-android"></a>
<a href="#" class="fa fa-dribbble"></a>
<a href="#" class="fa fa-vimeo"></a>
<a href="#" class="fa fa-tumblr"></a>
<a href="#" class="fa fa-vine"></a>
<a href="#" class="fa fa-foursquare"></a>
<a href="#" class="fa fa-stumbleupon"></a>
<a href="#" class="fa fa-flickr"></a>
<a href="#" class="fa fa-yahoo"></a>
<a href="#" class="fa fa-reddit"></a>
<a href="#" class="fa fa-rss"></a>
      
</body>
</html>

Step 3: Add CSS:

<style>
.fa {
    padding: 20px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    font-size: 30px !important;
    width: 70px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-pinterest {
  background: #cb2027;
  color: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background: #00aff0;
  color: white;
}

.fa-android {
  background: #a4c639;
  color: white;
}

.fa-dribbble {
  background: #ea4c89;
  color: white;
}

.fa-vimeo {
  background: #45bbff;
  color: white;
}

.fa-tumblr {
  background: #2c4762;
  color: white;
}

.fa-vine {
  background: #00b489;
  color: white;
}

.fa-foursquare {
  background: #45bbff;
  color: white;
}

.fa-stumbleupon {
  background: #eb4924;
  color: white;
}

.fa-flickr {
  background: #f40083;
  color: white;
}

.fa-yahoo {
  background: #430297;
  color: white;
}

.fa-soundcloud {
  background: #ff5500;
  color: white;
}

.fa-reddit {
  background: #ff5700;
  color: white;
}

.fa-rss {
  background: #ff6600;
  color: white;
}
</style>

Output:

How to include Social Media Icons using HTML CSS

The post How to create Social Media Icons using HTML CSS ? appeared first on csshint - A designer hub.

]]> 20+ Cool CSS Social Media Icons (Free Downloads) https://csshint.com/css-social-media-icons/ Tue, 28 Sep 2021 05:06:47 +0000 http://csshint.com/?p=6669 Latest Collection of 100% free CSS Social Media Icons examples. You can easily add These HTML social media icons to your website and increase your social following. See the Pen Media Icons by matt henley (@mattbhenley) on CodePen. Media Icons Author matt henley Made with HTML, SCSS Demo / Code Get Hosting See the Pen […]

The post 20+ Cool CSS Social Media Icons (Free Downloads) appeared first on csshint - A designer hub.

]]> Latest Collection of 100% free CSS Social Media Icons examples. You can easily add These HTML social media icons to your website and increase your social following.

Media Icons

Author

  • matt henley

Made with

  • HTML, SCSS

Demo / Code Get Hosting

SVG Social Icons

Author

  • Kevin Dewar

Made with

  • HTML, SCSS

Demo / Code Get Hosting

Stylish Social Buttons

Author

  • Chris Deacy

Made with

  • Pug, Stylus

Demo / Code Get Hosting

3D – CSS Social Tiles

Author

  • Stockin

Made with

  • HTML, CSS

Demo / Code Get Hosting

Social Media Icons - Floating

Social Media Icons – Floating


Social Media Icons – Floating

Author

  • Stockin

Made with

  • HTML, CSS

Demo / Code Get Hosting

Social media hover icons with pop-up titles

Author

  • Kieran Hunter

Made with

  • HTML, CSS, JS

Demo / Code Get Hosting

The Social Drawer

Author

  • Nour Saud

Made with

  • HTML, SCSS

Demo / Code Get Hosting

Social Buttons

Author

  • Dariusz Syncerek

Made with

  • Pug, Stylus

Demo / Code Get Hosting

Social Media icon reveal with transition

Author

  • Stefan Göllner

Made with

  • HTML, SCSS

Demo / Code Get Hosting

Clean Social Buttons – FREE

Author

  • Michael Rossi

Made with

  • HTML, Less

Demo / Code Get Hosting

Social Links

Author

  • Sazzad

Made with

  • HTML, CSS, JS

Demo / Code Get Hosting

CSS Social Media Icons

Author

  • Muhammet Hayran

Made with

  • HTML, CSS

Demo / Code Get Hosting

Social Media Icons With Font Awesome

Author

  • Bryan McDonald

Made with

  • HTML, CSS

Demo / Code Get Hosting

Social Media Icons

Author

  • Marty

Made with

  • HTML, CSS

Demo / Code Get Hosting

Pure CSS and Font Awesome Social Media Icon

Author

  • Poonam Khatri

Made with

  • HTML, CSS

Demo / Code Get Hosting

Social Media Icons HTML CSS

Author

  • Vishal Amipara

Made with

  • HTML, CSS

Demo / Code Get Hosting

Fancy Up Those Social Media Icons!!!

Author

  • Tichaona Brendon Nyeke

Made with

  • HTML, SCSS

Demo / Code Get Hosting

CSS Social Media Icons

Author

  • Muhammet Hayran

Made with

  • HTML, CSS

Demo / Code Get Hosting

The post 20+ Cool CSS Social Media Icons (Free Downloads) appeared first on csshint - A designer hub.

]]> Bootstrap 4 social media icons https://csshint.com/bootstrap-4-social-media-icons/ Sun, 15 Nov 2020 13:07:55 +0000 http://csshint.com/?p=4725 bootstrap social media icons : social media icons buttons, snippets by BBBootstrap.com. RESOURCES Bootstrap CSS : https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css Bootstrap JS : https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js Icons : https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css Jquery : https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

The post Bootstrap 4 social media icons appeared first on csshint - A designer hub.

]]> bootstrap social media icons : social media icons buttons, snippets by BBBootstrap.com.

bootstrap social media icons

bootstrap social media icons


RESOURCES

Bootstrap CSS : https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
Bootstrap JS  : https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js
Icons         : https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css
Jquery        : https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

The post Bootstrap 4 social media icons appeared first on csshint - A designer hub.

]]> Top 20 : Bootstrap Social Media Icons Code Examples https://csshint.com/bootstrap-social-media-icons/ Thu, 27 Feb 2020 17:43:04 +0000 http://csshint.com/?p=1597 Latest Collection of free Bootstrap Social Media Icons Code Examples. 1. bootstrap | social share bar See the Pen bootstrap | social share bar by mindstorm (@mindstorm) on CodePen. Author mindstorm Made with Html / CSS / JS demo and code Get Hosting 2. Font Awesome Twitter Bootstrap Social Icons See the Pen Font Awesome […]

The post Top 20 : Bootstrap Social Media Icons Code Examples appeared first on csshint - A designer hub.

]]> Latest Collection of free Bootstrap Social Media Icons Code Examples.

1. bootstrap | social share bar

Author

  • mindstorm

Made with

  • Html / CSS / JS

demo and code Get Hosting

2. Font Awesome Twitter Bootstrap Social Icons

Author

  • Kauress

Made with

  • Html / CSS

demo and code Get Hosting

3. Roll Over Social Buttons

Author

  • Hugo DarbyBrown

Made with

  • Html / CSS(SCSS)

demo and code Get Hosting

4. Social Button with css3 transition

Author

  • Tashrik Anam

Made with

  • Html / CSS

demo and code Get Hosting

5. Simplistic CSS Social Buttons

Author

  • Marcello Africano

Made with

  • Html / CSS(SCSS)

demo and code Get Hosting

6. Circular Social Buttons

Author

  • Shahnur Alam

Made with

  • Html / CSS(SCSS)

demo and code Get Hosting

7. Stylish Social Buttons

Author

  • Chris Deacy

Made with

  • Html / CSS(SCSS)

demo and code Get Hosting

8. Popup Social Share Buttons by Colorlib

Author

  • Aigars Silkalns

Made with

  • Html / CSS

demo and code Get Hosting

9. Expandable Social Icons

Author

  • zFunx

Made with

  • Html / CSS

demo and code Get Hosting

10. Bootstrap Social Share Buttons

Author

  • Jacob Lett

Made with

  • Html / CSS / JS

demo and code Get Hosting

11. Fancy Colorlib Social

Author

  • Aigars Silkalns

Made with

  • Html / CSS

demo and code Get Hosting

12. Social Media Sliding Icon Hover Effect – Pure CSS

Author

  • Oksana

Made with

  • Html / CSS

demo and code Get Hosting

13. Different Button Styles

Author

  • yasmin abdeltawab

Made with

  • Html / CSS

demo and code Get Hosting

14. Font Awesome Social Buttons

Author

  • Aigars Silkalns

Made with

  • Html / CSS

demo and code Get Hosting

15. Simple HTML/CSS Social Media Buttons

Author

  • Aigars Silkalns

Made with

  • Html / CSS(Less)

demo and code Get Hosting

16. Sliding Social Buttons by Colorlib

Author

  • Aigars Silkalns

Made with

  • Html / CSS

demo and code Get Hosting

17. Social buttons animated with Sass

Author

  • Aigars Silkalns

Made with

  • Html / CSS(Sass)

demo and code Get Hosting

20. Animated 3d social icon in css3

Bootstrap Social Media Icons

Bootstrap Social Media Icons


Author

  • RAJKUMAR123

Made with

  • Html / CSS

demo and code Get Hosting

The post Top 20 : Bootstrap Social Media Icons Code Examples appeared first on csshint - A designer hub.

]]> how to create social media icons with hover effects https://csshint.com/how-to-create-social-media-icons-with-hover-effects/ Sun, 29 Apr 2018 07:59:55 +0000 http://localhost/css/?p=83 In this post we are going to show how to how to create social media icons with hover effects with transition effect. these effects can make your site feel much more attaractive. you can use this effects in your projects. The structure of markup is very simple and intuitive. Create a container that will have […]

The post how to create social media icons with hover effects appeared first on csshint - A designer hub.

]]> In this post we are going to show how to how to create social media icons with hover effects with transition effect. these effects can make your site feel much more attaractive. you can use this effects in your projects.

how to create social media icons with hover effects

The structure of markup is very simple and intuitive. Create a container that will have our all the social icons list.

<div class="container">
 <ul class="social-icons">
  <li> <a href="#"><i class="fa fa-facebook"></i></a></li>
  <li> <a href="#"><i class="fa fa-twitter"></i></a></li>
  <li> <a href="#"><i class="fa fa-linkedin"></i></a></li>
  <li> <a href="#"><i class="fa fa-youtube"></i></a></li>
  <li> <a href="#"><i class="fa fa-google"></i></a></li>
 </ul> 
</div>

After creating our markup we’re going to set our style.
We set the general rules for our class and then we are going to add a special class with the desired effect styles.


/*--first include font awesome cdn file in header tag --*/  
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
body{
      background:#504496;
}
.social-icons {
      margin:50px auto;
      padding:0px;
      text-align:center;
      width:100%;
}
.social-icons li {
      Display:inline-block;
      margin:10px;
     }
.social-icons li a {
      color:#fff;
      display:inline-block;
      font-size:25px;
      height:50px;
      width:50px;
      text-decoration:none;
      position:relative;
      margin-bottom:20px;
      font-family:'FontAwesome';
      transition:all 0.5s ease;
     pointer-events:auto;
}
.social-icons li a i {
      line-height:50px;
}
.social-icons li a:hover  {
      color:#3a5ba0;
      background-color:#fff;
      -webkit-border-radius:25px;
      -moz-border-radius:25px;
      border-radius: 25px;
}

And now we’ll look our social icons effects.

how to create social media icons

I hope that you liked this social icons effects. Thanks and keep visting 🙂

how to create social media icons with hover effects , Learn how to style social media buttons with CSS , html code for social media buttons to website

The post how to create social media icons with hover effects appeared first on csshint - A designer hub.

]]>