BuddyPress.org

I tacked this one myself on my site. This is a custom buddypress.org feature, and was all done by using firebug.

The Pointer you see in the borders for the avatars on the profiles is actually a background image, added to the border via CSS.

The Image that buddypress uses is https://buddypress.org/wp-content/themes/buddypress.org/images/av_speech.gif

Now you need to put the proper CSS in your theme’s global css.

`div.activity-avatar {
background: url( images/av_speech.gif ) top right no-repeat;
padding-right: 15px;
overflow: hidden;
width: 50px;
float: left;
margin-right: 10px;
}
div.activity-avatar img.avatar {
border: 4px solid #f0f0f0;
width: 40px;
height: 40px;
}`

Now since this is a custom CSS, you will need to tweak the rulesets to match your structure like changing the padding-right to how you like it, but the CSS here is a basic structure and will overall get it how you want it