Align elements in bootstrap : <p>How can I get the fa-icon and the text to be vertically aligned in the row (visually)</p>

<pre><code>&lt;div class="row first-row"&gt;
            &lt;div class="d-inline col-xs-12 col-sm-1 col-md-1"&gt;
                &lt;i class="fa fa-camera-retro fa-2x"&gt;&lt;/i&gt;
            &lt;/div&gt;
            &lt;div class="d-inline align-middle col-xs-12 col-sm-6 offset-sm-1 offset-md-0 img-text"&gt;In New York&lt;/div&gt;
            &lt;div class="d-inline col-sm-2 date-text"&gt;17-08-2010&lt;/div&gt;
            &lt;div class="media col-sm-8 offset-sm-1"&gt;
                &lt;img src="images/innewyork.jpg" class="img-fluid rounded" alt="Responsive image"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
</code></pre>
