alignment issue of horizontal icons with one as an img pulled in, wrapping to nxt line

The trouble is the blog icon is an image. It is wrapping to next line. How can I get it into the mix? It will be last in the horizontal lineup. Lastly, I would ideally like the icons slightly closer together. Would that be handled in the ID with negative padding? I may have already tried that with no resolve.

<div class="col-md-3 col-xs-12 ">

    <div class="social">

          <div id="socialIconID">

<a href="#" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>

<a href="#" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>

<a href="#" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>

<a href="#/" target="_blank"><i class="fa fa-pinterest" aria-hidden="true"></i></a>

          </div>

    <ul><ul class="blog"><a target="_blank" href="#"></a></ul></ul>

    </div>

</div>

----------------------------------------------------

.social ul {

    float: left;

}

.social {

    padding: 33px 0 0 1px;

    margin-left: -20px;

}

.social a {

    background-size: contain;

    display: inline-block;

    height: 33px;

    width: 43px;   

}

.blog a {

    background: rgba(0, 0, 0, 0) url("images/blog.png");

}

.blog a:hover {

    background: rgba(0, 0, 0, 0) url("images/blog_over.png");

}

#socialIconID {

    color: #7e75a2;

    font-size: 38px;

    margin-left: -90px;

}

Appreciate the help!