How to create elegant comment icons.

Live demo here:
http://www.jsbin.com/ozaseq/4/

First let's start with the markup we're going to need. Simple is key here, we're going for lightweight HTML - you can customize it with little trouble.

<div class="comment">
    <div class="author">
        <img src="https://secure.gravatar.com/avatar/0d47338e59943a1baa5d83f81cf6913b?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png" alt="Sergio Tapia" />
      <h3>Sergio Tapia</h3>
    </div>

    <div class="body">
        <p>Best comment ever!</p>
    </div>
  </div>

Next let's focus on the CSS. I'm using LESS because it's much easier to write styles using nested statements.

.comment {
  overflow:hidden;
  font-family:Helvetica;
  border:1px solid #cacaca;
  background-color: #eee;
  margin-bottom:10px;


  .author {
    float:left;

    h3 {
      font-size:15px;
      margin-left:16px;
    }

    img {
      border:5px solid orange;
      border-radius:80px;
      width:90px;
      margin-left:10px;
      margin-top:10px;
      box-shadow:0px 2px 3px 0px #000000;
    }
  }

  .body {
    float:left;
    overflow:hidden;
    margin-left:10px;
  }
}

The main CSS you should focus on is the styles for the img tag.

Using a border-radius style of 80px gives you a nice round shape, and it looks great pretty much everywhere. Extremely simple and fast!

Now I've taken a few assumptions, for example I assume the picture is going to be square. I would recommend setting a standard height and width for the img tag.

In fact: Coderwall itself does this as well. Check if out, right click in my user icon up top and inspect the CSS applied to it.