title: Social icons in footer inline with text
body: <p>I'm student and very new at this. </p>
  
  <p>I'm trying to get the text (footer_contact_text) in same line as my footer icons (social_icons). Tried with display in-block and float but it does not work as I want. </p>
  
  <p>Trying to figure out what the problem is but i'm stuck.</p>
  
  <p>Sorry for a lot of code :) hope you understand.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Footer */
  
  .grid_medium_footer{
  
   margin: 0 auto;
      margin-left: 40px;
      margin-right: 40px;
  }
  
  
  .footer_contact {
   
      background-color: #f8f8f8;
      bottom: 0;
      width: 100%;
      padding-top: 30px;
      padding-bottom: 30px;
      font-size: 18px;
      line-height: 28px;
  }
  
  
  .footer_contact table {
   border: none;
  }
  
  
  .footer_contact th, td  {
   border: none;
   line-height: 16px;
  
  }
  
  ul.footer_contact_text{
   margin:0;
   list-style: none;
  }
  
  ul.footer_contact_text li{
   display: inline-block;
   padding-right: 20px;
   border-right: 2px solid #cdcdcd;
   line-height: 15px;
  
  }
  
  ul.footer_contact_text li:last-child{
   border-style: none;
   border-bottom: solid 1px #04fbc7;
   margin-right: 0px;
  }
  
   
  .footer_contact .social_icons {
   float:right;
   
  }
  
  .footer_contact ul.social_icons li {
   float: left;
   list-style: none;
   margin-right: 38px;
        
  }
  .footer_contact ul.social_icons li a{
   text-indent: -99999px;
      overflow: hidden;
      position: relative;
      display: inline-block;
      width: 35px;
      height: 35px;;
      background-position: -16px -729px;
  }
  .footer_contact ul.social_icons li a.social_facebook{
      background-position: -65px -785px;
      width: 16px;
      height: 16px;
  }
  .footer_contact ul.social_icons li a.social_twitter{
   background-position: -167px -785px;
      width: 16px;
      height: 16px;
  }
  .footer_contact ul.social_icons li a.social_linkedin{
   background-position: -117px -785px;
      width: 16px;
      height: 16px;
  }
  
  .footer_contact ul.social_icons li a.social_instagram{
   background-position: -17px -785px;
      width: 16px;
      height: 16px;
  }
  
  
  .footer_contact a {
   color: #3c273a;
      text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="footer_contact"&gt;
    &lt;div class="grid_medium_footer"&gt;
     
    &lt;div class="footer_icons"&gt;
     
              
            &lt;ul class="social_icons"&gt;
                 &lt;li&gt;&lt;a href="#" class="social_instagram     bgimgsprite"&gt;Instragram&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#" class="social_facebook bgimgsprite"&gt;Facebook&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#" class="social_linkedin bgimgsprite"&gt;Linkedin&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#" class="social_twitter bgimgsprite"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;
       &lt;/div&gt;   
       &lt;div class="fixfloat"&gt;&lt;/div&gt; 
       
       
    &lt;!--  Kontakt uppgifter statiska --&gt;
        &lt;ul class="footer_contact_text"&gt;    
     &lt;li&gt;&lt;?php echo (get_option('namn')); ?&gt;&lt;/li&gt;
      &lt;li&gt;&lt;?php echo (get_option('gata')); ?&gt;&lt;/li&gt;
     &lt;li&gt;&lt;?php echo (get_option('postnr')); ?&gt;&lt;/li&gt;
     &lt;li&gt;&lt;?php echo (get_option('epost')); ?&gt;&lt;/li&gt;
        &lt;/ul&gt;&lt;br&gt;
        
        &lt;table&gt;  
    &lt;tr&gt;  
       &lt;th&gt;&lt;?php echo (get_option('orgnr')); ?&gt;&lt;/th&gt;
     &lt;/tr&gt;
     &lt;tr&gt; 
        &lt;/table&gt;
       
        
     &lt;/div&gt; &lt;!-- grid_medium_footer --&gt; 
   &lt;/div&gt;   &lt;!--footer_contact --&gt;</code></pre>
  </div>
  </div>
  </p>