I've managed to achieve what you're after.
First off though, your code was very messy and in future you should prune/clean it before asking others to help you fix it. I took a 15 minute look at your code to understand it, and then rewrote the parts you're asking about with much less mess. This is what I get with the structure I've prepared for you:
The main problem with your original structure is that you were implementing the images as background images, which are harder to control, and not so good for your purpose.
I put the images directly into the HTML instead, and controlled their position and size through CSS. On that note, you can't place an
<img> tag inside an
<li>, so I made the icon elements within the top level list
<ul>'s instead, they are lists anyway, aren't they?
I put the 'EN' over the earth icon, I really think it looks a lot better, because everything aligns much more consistently than your original target - but of course it's up to you.
I used the
display:table-cell; property on all of the navigation links for it's many great features. It allows better control over spacing and centering content.
Lastly, I restructured the HTML and renamed classes to make it far easier to see what's going on.
Everything is now sitting comfortably in a good position, and responds very well to changing the window size.
Check out your new navigation JSfiddle, it's been on a strict diet, and now it's easy to see what's going on, and much easier to adjust and improve.
Just for flips and wiggles, I decided to make it even better: