How can I set the text on the right of a glyphicon into a Twitter BootStrap theme?

I am pretty new in Twitter BootStrap and I have the following problem:

I have defined this section into my page:

    <!-- Column 3:  -->
    <div class="container">
        <div class="col-md-4">
            <div class="group-item">
              <i class="glyphicon glyphicon-home"></i>
              <h4><a href="#">TEST</a></h4>
              <p>Bla Bla Bla</p>
            </div>
    </div>

So I want that the i tag that show the BootStrap glyphicon is on the left and that the thext (TEST and Bla Bla Bla) is on the right.

So I am trying to set the following CSS:

.groups i {
    float: left;
    margin-right: 15px;
    width: 80px;
}

But it can't work and I obtain that the text is under the glyphicon.

What am I missing?

The most obvious solution is to move the glyph into the link.

.group-item i {
  margin-right: .5em; /* margin to tast */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
        <div class="col-md-4">
            <div class="group-item">
              <h4><a href="#"><i class="glyphicon glyphicon-home"></i>TEST</a></h4>
              <p>Bla Bla Bla</p>
            </div>
    </div>

This has the added benefit of making the icon clickable.

Alternatively, just float the icon

.group-item i {
  float: left;
  margin-right: .5em;
  color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="col-md-4">
    <div class="group-item">
      <i class="glyphicon glyphicon-home"></i>
      <h4><a href="#">TEST</a></h4>
      <p>Bla Bla Bla</p>
    </div>
  </div>