How create circle icon


  • GNU/Linux

    I need to create circle icon like this:

    0_1478707085907_icona_giusta.png

    But Whit my code I obtain this:

    0_1478707104571_icona_sbagliata.png

    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


  • Global Moderator

    @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)


  • Admin

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


Log in to reply
 


Star

Looks like your connection to NodeBB was lost, please wait while we try to reconnect.