Please check this link and let me know this is what you looking for?
Html
<div>
<ul class="social">
<li class="facebook">
<a href="">
<strong>FACEBOOK</strong>
</a>
</li>
<li class="twitter">
<a href="">
<strong>TWITTER</strong>
</a>
</li>
<li class="pinterest">
<a href="">
<strong>PINTEREST</strong>
</a>
</li>
<li class="instagram">
<a href="">
<strong>INSTAGRAM</strong>
</a>
</li>
<li class="bloglovin">
<a href="">
<strong>BLOGLOVIN'</strong>
</a>
</li>
<li>
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
</label>
</form>
</li>
</ul>
</div>
CSS
.social {
list-style: none;
margin-bottom: 10px;
}
.social li {
display: inline;
float: left;
}
.social li a {
display: block;
width: 24px;
height: 24px;
padding-right: 50px;
position: relative;
}
.social li a strong {
position: absolute;
left: 50%;
margin-left: -90%;
margin-top: 30px;
font-family:'questrialregular';
text-transform: uppercase;
font-weight: 100;
font-size: 12px;
}
li.facebook {
background-image: url("http://3.bp.blogspot.com/-dG3Uh5wbbkc/UrbakrftBVI/AAAAAAAADe0/Nyk_oAJrz7o/s1600/facebook.png");
background-repeat: no-repeat;
}
li.twitter {
background-image: url("http://4.bp.blogspot.com/-Ub-33u2lfa4/UrbalXBwDQI/AAAAAAAADfA/wzp9y9g9Zts/s1600/twitter2.png");
background-repeat: no-repeat;
}
li.instagram {
background-image: url("http://4.bp.blogspot.com/-7n7d_7AueXo/UqV-qJxyw4I/AAAAAAAADaA/hOUqalWGy40/s1600/instagram.png");
background-repeat: no-repeat;
}
li.pinterest {
background-image: url("http://1.bp.blogspot.com/-w0LN-WnpsNc/UrbakgTnOkI/AAAAAAAADe4/vZpW7wi4ZMY/s1600/pinterest2.png");
background-repeat: no-repeat;
}
li.bloglovin {
background-image: url("http://3.bp.blogspot.com/-t9T07aBtYhQ/UqV-p7oZ1vI/AAAAAAAADZ4/dxY8FhqL48E/s1600/bloglovin.png");
background-repeat: no-repeat;
}
.social:hover li {
opacity: 1;
}
.social li {
transition-property: opacity;
transition-duration: 500ms;
}
.social li a strong {
opacity: 0;
transition-property: opacity;
transition-duration: 300ms;
}
.social li:hover {
opacity: 0.7;
}
.social li:hover a strong {
opacity: 1;
/*top:-10px;*/
}
.search-form {
position: relative;
/*right: 200px;
top: 200px;*/
color: #000;
}
.search-field {
background-color: transparent;
background-image: url("http://4.bp.blogspot.com/-FlxbQrrwMzg/UpsuqWwMWbI/AAAAAAAADYY/BT5hA_2R3MQ/s1600/search_icon.png'");
background-position: right;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 25px;
margin: 0px 0;
padding: 0px 0 0 34px;
position: absolute;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
text-transform: uppercase;
font-family: 'karlaregular';
font-size: 12px;
color: #000;
right:0;
}
.search-field:focus {
background-color: #fff;
border-bottom: 1px solid #000;
cursor: text;
outline: 0;
width: 230px;
position: absolute;
height: 25px;
text-transform: uppercase;
font-family:'karlaregular';
font-size: 12px;
color: #000;
right:0;
}
.searchform .search-submit {
display: none;
}
.button {
display: none;
}
form{padding:0; margin:0;}