Free Forever. Our themes will always be free. Forever. Period.

Social Icons Snippet

Mick in Tutorials on Sep 06, 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

Tagged with: social icons css smf font-awesome 


Mick

Mick G

idesignsmf.com

    

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




Latest Discussions

Join the conversation

Our Most Popular Features