HTML and CSS markup to achieve desired result
A few suggestions

You were using this to pass classes to your main logo

.col_left img {
    float:right;
    display: block;
    line-height:40px;
    margin-left: auto;
    margin-right: auto;
}


But that will create problems if you introduce any other images there. So instead try giving that element a class. For example, a class of logo or anything that you want to name it. This way there will not be any unexpected conflicts caused by CSS inheritance

HTML

&lt;a href="/" class="logo"&gt;
  &lt;img src="http://placehold.it/100x60"&gt;
&lt;/a&gt;


CSS

.logo {
  float:right;
  display: block;
  line-height:40px;
  margin-left: auto;
  margin-right: auto;
} 


In testing, can use image placeholders. In my example, I used Placehold.it which allows you to just give a desired height

All of your &lt;li&gt;s on the left have the same rules. So you might as well give that &lt;ul&gt; a class and pass rules that way. However some rules may not apply. Also you gave both an id and class to those &lt;li&gt;s. this is what I did 

HTML

&lt;ul class="options"&gt;
  &lt;li class="user"&gt;
    &lt;a href="#"&gt;User&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="vacancy"&gt;
    &lt;a href="#"&gt;Vacancies&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="company"&gt;
    &lt;a href="#"&gt;Company&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;


CSS

.user, .vacancy, .company {
  background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
  width: 0px;
  height: 20px;
  padding-left: 30px;
}

.user { background-position: -10px -6px; } 
.vacancy { background-position: -48px -6px; }
.company { background-position: -88px -6px; }


I did it that way so that you can choose to add in what you want to accept what CSS rules. 

in testing. When you have links, it is common to just use href="#"

Full code available at this CodePen.