Excellent Support. By using our themes, you also use our excellent support! Our expert staff is here for you.



Social Icons Snippet

Mick in Tutorials
Sep 06, 2018

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:
Code: [Select]
    // Output any remaining HTML headers. (from mods, maybe?)
    echo $context['html_headers'];

    echo '


Add after:
Code: [Select]
          <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.
Code: [Select]
<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

Tagged with: social icons css smf font-awesome 

Share This Post

Mick

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 and has a weakness for Tacos and Pizza.

    



0 Comments



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.




go up