title: FlexBox: align icons by left corner and keep same gap after them
body: <p>I have flexbox container with items. They are both horizontally and vertically aligned by center. This is normally rendered on a live website. However I need to align font awesome icons with text in such way:
  1). All icons are aligned by the left corner<br>
  2). The gap which goes after icons and before text must have the same length.</p>
  
  <p>Here is a <a href="https://codepen.io/anon/pen/LrLBKR" rel="nofollow noreferrer">CodePen</a> with a draft</p>
  
  <p>So it's shown that icons are not aligned properly.</p>
  
  <p>Code:</p>
  
  <pre><code>.contact-container {   
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    -ms-flex-direction: column; 
    -webkit-box-orient: horizontal; 
    -webkit-box-direction: normal; 
        -ms-flex-flow: row wrap; 
            flex-flow: row wrap; 
    display: -webkit-box;
    display: flex;  
  }
  .contact-container .copy {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;  
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
  }
  
  .contact-container .fa {
    font-size: 40px;    
    -ms-flex-negative: 0;    
        flex-shrink: 0;  
    padding-left:20px;
  }
  .contact-container .item &gt; *{color: #9f6a4a;}
  .contact-container .item { 
     -webkit-box-flex: 0; 
      flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 47%; 
    background:#fff;
    color:#fff;      
  }
  .contact-container .item{
      /*height: calc(720px/4);*/
      -ms-flex-item-align: center;
          align-self: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      text-align: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      /*min-height: 100%;*/
      min-width: 50%;
  }
  .contact-container h2{font-size:1.1em;font-weight:500;}
  .contact-container h3 {padding-left: 10px;}
  </code></pre>