Centering a text icon inside of a containing div

Question

I want to center a text icon above the h4 and p that follow. I would think this wouldn't be a problem but I have tried everything and the text icon is still stuck on the left instead of centered. Everything I do with margin, text-align or vertical-align, all seems to just move the icon around within its background. I have made a jsFiddle to play with and here is the code jic:

HTML:

<div id="contentCon1">
    <section class="textIcon large">
        <a href="">
            <i class="i-large icon-text-width"></i>
            <h4>Lorem Ipsum</h4>
            <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et tortor consequat, facilisis tortor ut, tempus purus. Duis porta dui turpis, ac blandit augue rhoncus a. </p>
            </div>
        </a>
    </section>
</div>

CSS:

#contentCon1 {
  clear: both;
  float: left;
  margin-left: 0;
  width: 35%;
  display: block;
  text-align: center;
}
a {
  text-decoration:none;
}
.textIcon > h4, .textIcon > a > h4 {
  font-size:16px;
  line-height:20px;
  font-weight:bold;
  color:#3B3B3B;
  margin:25px 0 0 0;
}
.textIcon > div {
  margin-top:15px
}
.textIcon > a {
  display:block;
}
.textIcon > a:hover > h4 {
  color:#F15A2B;
}

.textIcon.large {
  position:relative;
  border-bottom:1px solid #E9E9E9;
  padding-bottom:50px;
  margin-bottom: 20px;
}
.textIcon.large > i, .textIcon.large > a > i {
  float:none;
  margin:0;
}.textIcon.large > a:hover  p {
  color:#6b6b6b;
}
.textIcon.large:hover {
  border-bottom:1px solid #F15A2B;
}
.textIcon.large > a:hover > i {
  color:#FFF;
  background:#F15A2B;
}

@font-face {
  font-family: 'fontello';
  src: url('http://mtctinc.com/twBootstrap/styles/fonts/fontello.eot?11956569');
  src: url('http://mtctinc.com/styles/fonts/fontello.eot?11956569#iefix') format('embedded-opentype'),
       url('http://mtctinc.com/twBootstrap/styles/fonts/fontello.woff?11956569') format('woff'),
       url('http://mtctinc.com/twBootstrap/styles/fonts/fontello.ttf?11956569') format('truetype'),
       url('http://mtctinc.com/twBootstrap/styles/fonts/fontello.svg?11956569#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}


 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none; 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
} 
.icon-text-width:before { 
    content: '\e801';
} /* '' */

i.i-large {
  width:75px;
  height:75px;
  background:#EEE;
  border-radius:48px;
  color:#999;
  display:table-cell;
  vertical-align:middle;
  float:none;
  margin:-5px 0px 10px 0px;
  text-align:center;
  font-size:38px;
  cursor:default;
}

Answer 1

Given that text-align:center is on the parent element, all you would have to do is change the display of the icon from table-cell to inline-block.

Updated Example Here

i.i-large {
    display:inline-block;
}

Answer 2

Insert into CSS

i.icon-text-width {
    display: inline-block;
}