Vertical align icon and text list

Question

I have had this problem various times and never really quite know the best way to approach it.

A screenshot for a better context:

What it should look like...

.container {
max-width: 360px;
font-size: 16px;
}
.talking-point {
    margin-bottom: 10px;
    display: table;
    background-image: url('http://s28.postimg.org/yozkg6ueh/speech_bubble.png');
    background-repeat: no-repeat;
    background-position: 0 45%;
    min-height: 35px;
    i {
        padding-left: 10px;
        line-height: 27px;
        color: #fff;
    }
    p {
        padding-left: 18px;
    display: table-cell;
        vertical-align: middle;

    }
}

Please check out the fiddle here Updated as per the below :
http://jsfiddle.net/67AD7/

Now my question is, how do I achieve a 'better' vertical-alignment between the icon and text in this situation. I'm almost tempted to use a table or should I use a list?

Note, I need to be able to insert HTML ('post-count') over the icon as in the examples provided.

Any help is greatly appreciated!

Answer 1

You'll basically have to assigned the background to the i tag . Your CSS ends up looking like below:

.talking-point {
  margin-bottom: 10px;
  display: table;
  min-height: 35px;
  i {
    background: url('http://s28.postimg.org/yozkg6ueh/speech_bubble.png') no-repeat;
    padding-left: 8px;
    line-height: 30px;
    width: 35px;
    height: 35px;
    display: inline-block;
    color: #fff;
  }
  p {
    display: table-cell;
    vertical-align: middle;

  }
}

http://jsfiddle.net/xNTh9/