Hello,

To increase/decrease socials size, please add this code into your custom css box:

.footer_social_icons.circle li a i {
    font-size: 16px !important;
}

To open in new tab, please go to file \includes\widgets\codeless_socialwidget.php and find these lines:

echo '<ul class="footer_social_icons '.esc_attr($style).'">';
   if( !empty($cl_redata['facebook']) )
    echo '<li class="facebook"><a href="'.esc_url($cl_redata['facebook']).'"><i class="icon-facebook"></i></a></li>';
   if( !empty($cl_redata['twitter']) )
    echo '<li class="twitter"><a href="'.esc_url($cl_redata['twitter']).'"><i class="icon-twitter"></i></a></li>';
   if( !empty($cl_redata['flickr']) )
     echo '<li class="flickr"><a href="'.esc_url($cl_redata['flickr']).'"><i class="icon-flickr"></i></a></li>';
   if( !empty($cl_redata['google']) )
    echo '<li class="google"><a href="'.esc_url($cl_redata['google']).'"><i class="icon-google"></i></a></li>';
   if( !empty($cl_redata['dribbble']) )
    echo '<li class="dribbble"><a href="'.esc_url($cl_redata['dribbble']).'"><i class="icon-dribbble"></i></a></li>';
   if( !empty($cl_redata['foursquare']) )
    echo '<li class="foursquare"><a href="'.esc_url($cl_redata['foursquare']).'"><i class="icon-foursquare"></i></a></li>';
   if( !empty($cl_redata['linkedin']) )
     echo '<li class="foursquare"><a href="'.esc_url($cl_redata['linkedin']).'"><i class="icon-linkedin"></i></a></li>';
   if( !empty($cl_redata['pinterest']) )
    echo '<li class="pinterest"><a href="'.esc_url($cl_redata['pinterest']).'"><i class="icon-pinterest"></i></a></li>';
   if( !empty($cl_redata['youtube']) )
    echo '<li class="youtube"><a href="'.esc_url($cl_redata['youtube']).'"><i class="icon-youtube"></i></a></li>';
   if( !empty($cl_redata['email']) )
    echo '<li class="email"><a href="'.esc_url($cl_redata['email']).'"><i class="icon-envelope"></i></a></li>';
   if( !empty($cl_redata['instagram']) )
    echo '<li class="email"><a href="'.esc_url($cl_redata['instagram']).'"><i class="icon-instagram"></i></a></li>';
echo '</ul>';

Replace with these:

echo '<ul class="footer_social_icons '.esc_attr($style).'">';
   if( !empty($cl_redata['facebook']) )
    echo '<li class="facebook"><a href="'.esc_url($cl_redata['facebook']).'" target="_blank"><i class="icon-facebook"></i></a></li>';
   if( !empty($cl_redata['twitter']) )
    echo '<li class="twitter"><a href="'.esc_url($cl_redata['twitter']).'" target="_blank"><i class="icon-twitter"></i></a></li>';
   if( !empty($cl_redata['flickr']) )
     echo '<li class="flickr"><a href="'.esc_url($cl_redata['flickr']).'" target="_blank"><i class="icon-flickr"></i></a></li>';
   if( !empty($cl_redata['google']) )
    echo '<li class="google"><a href="'.esc_url($cl_redata['google']).'" target="_blank"><i class="icon-google"></i></a></li>';
   if( !empty($cl_redata['dribbble']) )
    echo '<li class="dribbble"><a href="'.esc_url($cl_redata['dribbble']).'" target="_blank"><i class="icon-dribbble"></i></a></li>';
   if( !empty($cl_redata['foursquare']) )
    echo '<li class="foursquare"><a href="'.esc_url($cl_redata['foursquare']).'" target="_blank"><i class="icon-foursquare"></i></a></li>';
   if( !empty($cl_redata['linkedin']) )
     echo '<li class="foursquare"><a href="'.esc_url($cl_redata['linkedin']).'" target="_blank"><i class="icon-linkedin"></i></a></li>';
   if( !empty($cl_redata['pinterest']) )
    echo '<li class="pinterest"><a href="'.esc_url($cl_redata['pinterest']).'" target="_blank"><i class="icon-pinterest"></i></a></li>';
   if( !empty($cl_redata['youtube']) )
    echo '<li class="youtube"><a href="'.esc_url($cl_redata['youtube']).'" target="_blank"><i class="icon-youtube"></i></a></li>';
   if( !empty($cl_redata['email']) )
    echo '<li class="email"><a href="'.esc_url($cl_redata['email']).'" target="_blank"><i class="icon-envelope"></i></a></li>';
   if( !empty($cl_redata['instagram']) )
    echo '<li class="email"><a href="'.esc_url($cl_redata['instagram']).'" target="_blank"><i class="icon-instagram"></i></a></li>';
echo '</ul>';

Save file.

Best regards!

Hello,

Increase the values more. Until you get the size you want.

Best regards!

Hello,

Perhaps you are using other css classes. Open page with inspect element and find the right css classes to edit. Or send us your site’s url. We can give you the specific code to add.
Let us know.

Best regards!

Hello,

I see the footer icons have the color altered by custom css, but i didn’t see the font size code for it. Did you added it? However, please try this code:

.footer_social_icons.circle li a i {
    font-size: 25px !important;
}

Result.
If still no luck, then go to file style.css and find these lines:

.footer_social_icons.circle li a i{
  color:#fff;
  line-height:32px !important;
  font-size:14px !important;
}

Remove !important from font size.

Best regards!