title: How do I center Glyphicons horizontally using Twitter Bootstrap
body: <p>I am trying to center my FontAwesome icons inside my Twitter Bootstrap code. </p>
  
  <p>This is my HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="frontpage-content" class="content"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-4"&gt;
                  &lt;span&gt;
                      &lt;i class="fa fa-camera-retro fa-5x"&gt;&lt;/i&gt;
                  &lt;/span&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, inventore, ipsa dolorum laborum sit alias iusto nam quibusdam ad distinctio rerum expedita autem itaque delectus iste mollitia perferendis sint libero accusamus
                          in. Enim, natus necessitatibus pariatur optio explicabo consequuntur quod!&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-4"&gt;
                  &lt;i class="fa fa-camera-retro fa-5x"&gt;&lt;/i&gt;
                  &lt;p&gt;Ut, aliquid, aperiam, veniam modi voluptates maiores nesciunt libero fugiat illum recusandae cum similique et alias possimus error ex tenetur quasi sint eius dicta officia earum eveniet suscipit corporis autem deleniti nihil sed!
                          Earum blanditiis vel similique nisi fugit reprehenderit?&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-4"&gt;
                  &lt;i class="fa fa-camera-retro fa-5x"&gt;&lt;/i&gt;
                  &lt;p&gt;Quisquam eos aperiam autem atque minus modi similique earum! Ab, laboriosam odit non quo officiis asperiores atque dolorum omnis vitae in qui officia sequi molestias quisquam velit exercitationem aperiam. Voluptatum, unde, nesciunt
                          temporibus voluptates sint ab architecto at quod dolore.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And here is what I have already tried:</p>
  
  <pre class="lang-css prettyprint-override"><code>#frontpage-content {
      background-color: $bgDefault;
      i {
          text-align:center;
      }
      span {
          text-align:center;
      }
  }
  </code></pre>
  
  <p>Works perfectly for the text, but doesn't work for the <code>i</code> elements.</p>
  
  <p>I know I can center it, if I give to the surrounding div a static width and then position the <code>i</code> element with...</p>
  
  <pre class="lang-css prettyprint-override"><code> margin-right: auto;
   margin-left: auto;
   display: block;
  </code></pre>
  
  <p>...but I don't want to give the surrounding div a static width.</p>
  
  <p>So, how do I solve this problem, without applying static width?</p>
  
  <p><strong>Edit:</strong> Also I know of the <code>center</code> HTML element, but this wouldn't be CSS, and therefore not very handy.</p>