How do I align text horizontally with other text?

I am writing some html code, and would like to know how to align some text so that the text has the same indent as other text from the left of the page.

Here is my code:

<p><i class="fa fa-phone"></i><span style=""> Phone : 0800 000 000</span></p>
<p><i class="fa fa-home"></i><span style=""> Web : http://www.example.com</span></p>
<p><i class="fa fa-map-marker"></i><span style=""> Map : example map address</span></p>
<p><i class="fa fa-envelope"></i><span style=""> Email : [email protected]</span></p>

Here is the code in the html, with the classes:

    <div class="box1">
        <div class="box box-default">
          <div class="box-header with-border">
            <h3 class="box-title">Collapsable</h3>
            <div class="box-tools pull-right">
              <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            </div><!-- /.box-tools -->
          </div><!-- /.box-header -->
          <div class="box-body">
            <p><i class="fa fa-phone"></i><span style=""> Phone : 0800 000 000</span></p>
            <p><i class="fa fa-home"></i><span style=""> Web : http://www.example.com</span></p>
            <p><i class="fa fa-map-marker"></i><span style=""> Map : example map address</span></p>
            <p><i class="fa fa-envelope"></i><span style=""> Email : [email protected]</span></p>
          </div><!-- /.box-body -->
        </div><!-- /.box -->
    </div>

In the above code, some of the icons have a different width than the other icons. Because of this, the text for the lines of code do not align the same distance from the left of the page.

How can I do this? Am I looking for the span class or something else?

Thanks in advance.

Solution

try this:

<style type="text/css">
    i{width: 30px;}
</style>