Social Icons Snippet

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



idesignSMF Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF.com 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.

idesignSMF.com | SimpleMachines.org



0 Comments


rocket_launch

Awesome Support. Download our themes, you also get theme support.