How create circle icon

[Doppy]

I need to create circle icon like this:

But Whit my code I obtain this:

My code is:

<div class="clearfix post-header"><div class="icon pull-left"><a href="/user/admin"><div component="user/picture" data-uid="1" class="user-icon" style="background-color: #673ab7;" data-original-title="" title="">A</div><i component="user/status" class="fa fa-circle status online" title="" data-original-title="Online"></i></a></div><small class="pull-left"><strong><a href="/user/admin" itemprop="author" data-username="admin" data-uid="1">admin</a></strong><a href="/groups/administrators"><small class="label group-label inline-block" style="background-color: #000000;">administrators</small></a><div class="visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block"><a class="permalink" href="/post/8"><span class="timeago" title="Wed Nov 09 2016 11:02:59 GMT+0100 (CET)">about 4 hours ago</span></a><i class="fa fa-pencil-square pointer edit-icon" title="" data-original-title="last edited by admin 21 minutes ago"></i><small data-editor="admin" component="post/editor" class="hidden">last edited by admin <span class="timeago" title="Wed Nov 09 2016 14:37:28 GMT+0100 (CET)">41 minutes ago</span></small><span></span></div><span class="bookmarked"><i class="fa fa-bookmark-o"></i></span></small></div>

<div class="content" component="post/content" itemprop="text"><p>ssdfffffffffffffffffffffff sfsadf7asdfsdfdfsd</p></div>

Anyone to help me to modify the image to became a circle image?It seem like less the value in css

[PitaJ]

@Doppy depends on what you want. If you want an icon the same size as the one on a post, you just need to wrap essentially what you have in .topic .posts

Letter on color icon

<div class="topic">
  <div class="posts">
    <div class="icon pull-left">
      <a href="/user/doppy">
        <div component="user/picture" data-uid="7287" class="user-icon" style="background-color: #009688;" data-original-title="" title="">D</div>
        <i component="user/status" class="fa fa-circle status offline" title="" data-original-title="Offline"></i>
      </a>
    </div>
  </div>
</div>

Icon with image

<div class="topic">
  <div class="posts">
    <div class="icon pull-left">
      <a href="/user/pitaj">
        <img component="user/picture" data-uid="3076" src="https://i.imgur.com/ylkuNNd.png" align="left" itemprop="image">
        <i component="user/status" class="fa fa-circle status online" title="Online"></i>
      </a>
    </div>
  </div>
</div>

If you instead want a larger avatar display, you can do this:

Letter on color icon

<div class="avatar avatar-lg avatar-rounded" style="background-color: #009688;" title="" data-original-title="Doppy">D</div>

Icon with image

<img src="https://i.imgur.com/ylkuNNd.png" class="avatar avatar-lg avatar-rounded" data-original-title="" title="">

You can change avatar-lg to avatar-md for a smaller version (the size of the one in the upper right corner of your screen)

[julian]

I also believe there is .avatar-rounded for 50% border radius.