Customize Top Bar

Hi,
I am trying to customize the top bar in order to :
– increase its height
– center the Header Phone Number/Extra Info
– incease the size of the font for phone number, the “social network” icon and the header menu

After grabbing here and there in this forum information, here is my result :

I still have two problems
1. the email icon is not aligned with the telephone number and the language menu
2. the email icon does not appear on the mobile version of the web site.

Below the css code I have added. Would you have any suggestion to solve my issues?

Thank you for your help.

/* augmente la taille de l’entête (top bar)*/
#header_meta .container {
min-height: 40px;
}
.phone-info.with_nav {
font-size: 18px;
}
.sub_menu>ul>li>a, .sub_menu>div>ul>li>a {
font-size: 18px;
}

/* augmente la taille des icônes réseau sociaux dans l’entête (top bar)*/
#top .social_bookmarks li a {
width: 50px;
line-height: 50px;
min-height: 50px;
font-size: 20px;
}

#top .social_bookmarks li {
width: 50px;
}

/* centre le contenu de la topbar*/
#top #header_meta .phone-info {
left: 50%;
position: absolute;
transform: translateX(-50%);
}