Social Icons Snippet

Written by Mick in Tutorials on 06 Sep 2018

"social icon snippet"
Let's create a very easy and simple social icons block with Font-Awesome icons in an HTML block with your favorite portal of choice. Probably the quickest way to add social icons to your portal with just a tiny bit of CSS.




Let's add a single line to your theme's index.template file to call the icons from Font-Awesome.
Find:
    // Output any remaining HTML headers. (from mods, maybe?)
    echo $context['html_headers'];

    echo '



Add after:
          <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous" />


Include everything in your block. Replace icons if you wish from Font-Awesome and add URL to your social sites.

<style type="text/css">
.social-font-awesome {
  color: #eeeeee;
  background-color: transparent;
  text-align: center;
  padding: 30px 0;
}
@media (max-width:767px) {
  .social-font-awesome {
    padding: 20px 0;
  }
}
.social-font-awesome i {
  font-size: 24px;
  display: inline-block;
  color: #0984e3;
  margin: 0 5px;
  width: 40px;
  height: 40px;
  border: 1px solid #0984e3;
  background-color: transparent;
  text-align: center;
  border-radius: 50%;
  line-height: 38px;
}
.social-font-awesome i:hover {
  color: #9b59b6;
  border: 1px solid #9b59b6;
  border-radius: 50%;
}
</style>


    <div class="social-font-awesome">
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-google-plus-g"></i></a>
        <a href="#"><i class="fab fa-youtube"></i></a>
    </div>



Icons used: Font-Awesome
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.
    

0 Comments


Get more stuff like this

Subscribe to our mailing list and get interesting content and updates.