Moving Icons within a Footer on a Wordpress site - html

Question

I've been working on a site for a while and coming to the end of the development section with a few little issues that need resolving, but first some backstory!
I'm using a wordpress theme called Oneengine (it's really good if you're wanting to create a parallax site by the way) and within it it includes a wide range of different tools that can be used.
A couple of things I'm in dire need of help with and if anyone could help that would be greatly appreciated, I really at the end of sorting it out and so close to finishing it!
Is there a way to center the social media icons at the bottom of the page?
At the moment I’m only using Twitter & Linkedin and don’t think it will need other social media icons. Due to the amount of icons that can be displayed (but aren’t) the Twitter / Linkedin icons are slightly off. Is there a way to fix this so that the divider in the middle of the two brands is in the middle of the site?
Change the size and positioning of the contact icons?
Is it possible to change the way that they are positioned? For some reason the phone icon is a tad too high and needs lowering (only by a few pixels) as well as being made slightly bigger (again, by a few pixels) Where can I find this and adjust the icons?
Making Social Media icons bigger?
Similar to the contact icons, how would I go about adjusting the size of the social media icons?
Below is the code I'm using for the footer, if anyone could have a look at it and let me know what I need to do to make these amends that would be super cool.
</div><!-- #content -->
<div class="clearfix"></div>
<?php if(is_front_page()){ ?>
<center><footer id="contact" class="site-footer template-wrap" role="contentinfo">
<?php
$color = oneengine_option('footer_blog_color');
$img = oneengine_option('footer_blog_img', false, 'url');
$repeat = oneengine_option('footer_blog_repeat');
$parallax = oneengine_option('footer_blog_parallax');
$cover = oneengine_option('footer_blog_cover');
$bg_repeat = '';
if( $repeat == 1 || $repeat == true){
$bg_repeat = 'background-repeat:no-repeat;';
}else $bg_repeat = 'background-repeat:repeat;';
$bg_cover = '';
if( $cover == 1 || $cover == true){
$bg_cover = 'background-size:cover;';
}else $bg_cover = '';
$bg_img = '';
if( $img ){
$bg_img = 'background-image:url('.$img.');';
}else $bg_img = '';
$img = ( ! empty ( $img ) ) ? ''.$bg_img.'' : '';
$color = ( ! empty ( $color ) ) ? 'background-color:'. $color .';' : '';
$repeat = ( ! empty ( $repeat ) ) ? ''. $bg_repeat .'' : '';
$cover = ( ! empty ( $cover ) ) ? ''. $bg_cover .'' : '';
$parallax = ( ! empty ( $parallax ) ) ? 'background-attachment: fixed;': '';
/** Style Container */
$style = (
! empty( $img ) ||
! empty( $color ) ||
! empty( $repeat ) ||
! empty( $cover ) ||
! empty( $parallax ) ) ?
sprintf( '%s %s %s %s %s', $img, $color, $repeat, $cover, $parallax ) : '';
$css = '';
if ( ! empty( $style ) ) {
$css = 'style="'. $style .'" ';
}
?>
<div class="footer-img" <?php echo $css ?>></div>
<div class="container">
<div class="row">
<?php
$color_title = oneengine_option('footer_blog_title_color');
$color_sub_title = oneengine_option('footer_blog_subtitle_color');
$color_title = ( ! empty ( $color_title ) ) ? 'color:'. $color_title .';' : '';
$color_sub_title = ( ! empty ( $color_sub_title ) ) ? 'color:'. $color_sub_title .';' : '';
/** Style Container */
$title_color = (
! empty( $color_title ) ) ?
sprintf( '%s', $color_title) : '';
$css_title_color = '';
if ( ! empty( $title_color ) ) {
$css_title_color = 'style="'. $title_color .'" ';
}
$sub_title_color = (
! empty( $color_sub_title ) ) ?
sprintf( '%s', $color_sub_title) : '';
$css_sub_title_color = '';
if ( ! empty( $sub_title_color ) ) {
$css_sub_title_color = 'style="'. $sub_title_color .'" ';
}
?>
<div class="col-md-12">
<div class="heading-title-wrapper" style="color">
<h2 class="title" <?php echo $css_title_color ?>><margin-top= 30px><?php echo oneengine_option('footer_blog_title') ?></h2>
<span class="line-title" style="background-color:#65b32e"></span>
<span class="sub-title" <?php echo $css_sub_title_color ?>><?php echo oneengine_option('footer_blog_subtitle') ?></span>
</div>
</div>
<div class="clearfix"></div>
<div class="list-contact-wrapper">
<?php if(oneengine_option('email_footer') != '') {?>
<div class="col-md-4">
<div class="contact-wrapper">
<span class="icon"><i class="fa fa-envelope"></i></span>
<p><?php echo nl2br(oneengine_option('email_footer')); ?></p>
</div>
</div>
<?php } ?>
<?php if(oneengine_option('address_footer') != '') {?>
<div class="col-md-4">
<div class="contact-wrapper">
<span class="icon"><i class="fa fa-map-marker"></i></span>
<p><?php echo nl2br(oneengine_option('address_footer')); ?></p>
</div>
</div>
<?php } ?>
<?php if(oneengine_option('phone_footer') != '') {?>
<div class="col-md-4">
<div class="contact-wrapper">
<span class="icon"><i class="fa fa-phone"></i></span>
<p><?php echo nl2br(oneengine_option('phone_footer')); ?></p>
</div>
</div>
<?php } ?>
</div>
<div class="clearfix"></div>
<?php if(oneengine_option('contact_form') != '') {?>
<div class="contact-form-wrapper">
<h2 class="contact-title"></h2>
<?php echo do_shortcode( oneengine_option('contact_form') ); ?>
</div>
<?php } ?>
</div>
</div>
<div style = "center">
<div class="site-info">
<ul class="social-footer">
<?php if(oneengine_option('twitter') != '') {?>
<li><i class="fa fa-twitter"></i></li>
<?php } ?>
<?php if(oneengine_option('linkedin') != '') {?>
<li><i class="fa fa-linkedin"></i></li>
<?php } ?>
</ul>
<div class="copyright">
<?php echo nl2br(oneengine_option('copyright')); ?>
<br>
</div><!-- .site-info -->
</footer><!-- #colophon -->
<?php } ?>
</div></div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
Here the website Im building can be found: http://www.jamiebull.co.uk/Meadows_site/ so you know what I'm talking about.
Thanks for looking!

Answer 1

To centralise your social media icons, you will need to add the following CSS at the bottom of your stylesheet:
.social-footer li {
margin: 0px;
border-right: 0px;
padding-right: 0px;
}
.social-footer li:first-child {
border-right: 1px solid white;
padding-right: 10px;
margin-right: 10px;
}
To increase the size of the contact icons and adjust their line-height, you will need to target each icon using CSS. For example, if you want to increase the size of the phone icon and adjust its top margin, you will need to use the following code:
.fa-phone {
font-size: 25px !important;
line-height: 2 !important;
}
To target the map icon and the envelope icon, you will need to use fa-map-marker and fa-envelope respectively instead of .fa-phone in the code above.
To increase the size of the social media icons in the footer, you will need to add the following CSS at the botoom of your stylesheet:
.social-footer .fa {
font-size: 25px;
}

Answer 2

EDIT: I should note that I'm not familiar with this theme. But many modern and more advanced themes have special theme settings with specific fields for adding to the CSS. Some themes will even use these fields to generate a styles.css automatically.
So depending on the theme you may want to define the CSS for these elements in those specific fields in the theme settings, rather than adding directly to styles.css, which may be overwritten.
Well, it turns out that the contact and social media icons are actually just characters in a font that is included with the theme.
This means you can just add some information to your styles.css and change font-sizes, line-heights, etc. and it will update those icons.
So by adding to or changing your styles.css you can overwrite their sizes/positions. It looks like the CSS for some of these elements is already defined in your styles.css (but this could be generated automatically depending on how the theme works), so look to change them before you add something new.
The footer with the social icons is .social-footer, for which you seem to have defined some CSS in styles.css already. It looks like you have padding:0; defined, but it appears that the theme automatically accounts for the missing icons? If I remove padding:0; then the icons seem to center themselves.
For the social icons themselves, here is the CSS for their size:
.social-footer li {
/* Probably you have some other stuff defined here already...*/
font-size: 18px; /* This line controls the size of the icons. */
}
As for the contact icons, the icons themselves are actually all aligned properly, but I guess the phone icon is just drawn with a little more whitespace in the font itself.
The contact icons themselves are of class fa, while the phone icon specifically is of class fa-phone. If you want to manually move it down, you can add something like this (you don't appear to have fa-phone defined already):
.fa-phone {
font-size: 18px; /* This is what the icons are set to now. Increase to make bigger */
line-height: 2.2; /* This is what the icons are set to now. Increase to move further down */
}
Hopefully this is what you were looking for!
If you ever need to know the class for a particular element or want to play with the CSS on the fly, Google Chrome's element inspector and other dev tools are fantastic. Just hit F12 in Chrome or right click and select "Inspect Element".