Shape 5

Dear Sir,

Let me know if you can add a social right of the footer in "s5_socialicons" I added the code in index.php and css but the icon does not appear.

template.css:

#s5_socialicons   {
   float:right;}
   
   #s5_rss, #s5_instagram, #s5_google, #s5_youtube, #s5_twitter, #s5_fb  {
      -webkit-transition:  all 100ms ease-in 0s;
      -moz-transition:  all 100ms ease-in 0s;
      -o-transition: all 100ms ease-in 0s;
      transition:  all 100ms ease-in 0s;}
      
index.php

<?php if (($s5_rss  != "") || ($s5_youtube  != "") || ($s5_facebook  != "") || ($s5_google  != "") || ($s5_twitter  != "") || ($s5_instagram  != "")) { ?>
         <div id="s5_socialicons"    <?php if ($s5_scrolltotop  == "yes") { ?>style="margin-right:85px;"<?php } ?> >         
                              
               <?php if ($s5_rss  != "") { ?>
               <div id="s5_rss" onclick="window.open('<?php echo $s5_rss; ?>')"></div><?php } ?>
               
               <?php if ($s5_instagram  != "") { ?>
               <div id="s5_instagram" onclick="window.open('<?php echo $s5_instagram; ?>')"></div><?php } ?>
               
               <?php if ($s5_google != "") { ?>
               <div id="s5_google" onclick="window.open('<?php echo $s5_google; ?>')"></div><?php } ?>
               
               <?php if ($s5_youtube != "") { ?>
               <div id="s5_youtube" onclick="window.open('<?php echo $s5_youtube; ?>')"></div><?php } ?>
               
               <?php if ($s5_facebook  != "") { ?>
               <div id="s5_fb" onclick="window.open('<?php echo $s5_facebook; ?>')"></div><?php } ?>
               
               <?php if ($s5_twitter  != "") { ?>
               <div id="s5_twitter" onclick="window.open('<?php echo $s5_twitter; ?>')"></div><?php } ?>            
   #s5_rss:hover, #s5_instagram:hover, #s5_google:hover, #s5_youtube:hover, #s5_twitter:hover, #s5_fb:hover  {
      -webkit-transition:  all 100ms ease-in 0s;
      -moz-transition:  all 100ms ease-in 0s;
      -o-transition: all 100ms ease-in 0s;
      transition:  all 100ms ease-in 0s;}   
      
         
   #s5_rss {
      float:left;
      height:30px;
      width:30px;
      margin-left:5px;
      margin-bottom:5px;
      cursor:pointer;
      background:url(../images/rss.png) no-repeat;}   
      
      #s5_rss:hover {
         background-position: 0px -32px;}   
      
   #s5_google {
      float:left;
      height:30px;
      width:30px;
      margin-left:5px;
      margin-bottom:5px;
      cursor:pointer;
      background:url(../images/google.png) no-repeat;}   
      
      #s5_google:hover {
         background-position: 1px -32px;}

   #s5_youtube {
      float:left;
      height:30px;
      width:30px;
      margin-left:5px;
      margin-bottom:5px;
      cursor:pointer;
      background:url(../images/youtube.png) no-repeat;}   

      #s5_youtube:hover {
         background-position: 0px -32px}
      

   #s5_twitter {
      float:left;
      height:30px;
      width:30px;
      margin-left:5px;
      margin-bottom:5px;
      cursor:pointer;
      background:url(../images/twitter.png) no-repeat;}      
      
      #s5_twitter:hover {
         background-position: 0px -32px}
      
      
   #s5_fb {
      float:left;
      height:30px;
      width:30px;
      margin-left:5px;
      margin-bottom:5px;
      cursor:pointer;
      background:url(../images/facebook.png) no-repeat;}      

      #s5_fb:hover {
         background-position: 0px -32px}
         
   #s5_instagram {
      float:left;
      height:30px;
      width:30px;
      margin-left:5px;
      margin-bottom:5px;
      cursor:pointer;
      background:url(../images/instagram.png) no-repeat;}   
      
      #s5_instagram:hover {
         background-position: 0px -32px;}

Hello,

You can either replace the icons that are already there with your own images or use the following tutorial to help you add one in custom.

http://www.shape5.com/documentation/Vertex-Framework/Advanced/How-to-add-additional-Social-Icons-in-Vertex-