.avatar{
    position: relative;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    text-align: center;
    
    span, i{
        vertical-align: middle
    }
    &.rounded{
        border-radius: 10px !important ; 
    }
    &.avatar-10{
        height: 10px;
        line-height: 10px;
        width: 10px;
    }
    &.avatar-20{
        height: 20px;
        line-height: 20px;
        width: 20px;
    }
    &.avatar-30{
        height: 30px;
        line-height: 30px;
        width: 30px;
    }
    &.avatar-40{
        height: 40px;
        line-height: 40px;
        width: 40px;
    }
    &.avatar-50{
        height: 50px;
        line-height: 50px;
        width: 50px;
    }
    &.avatar-60{
        height: 60px;
        line-height: 60px;
        width: 60px;
    }
    &.avatar-70{
        height: 70px;
        line-height: 70px;
        width: 70px;
    }
    &.avatar-80{
        height: 80px;
        line-height: 80px;
        width: 80px;
    }
    &.avatar-90{
        height: 90px;
        line-height: 90px;
        width: 90px;
    }
    &.avatar-100{
        height: 100px;
        line-height: 100px;
        width: 100px;
    }
    &.avatar-110{
        height: 110px;
        line-height: 110px;
        width: 110px;
    }
    &.avatar-120{
        height: 120px;
        line-height: 120px;
        width: 120px;
    }
    &.avatar-130{
        height: 130px;
        line-height: 130px;
        width: 130px;
    }
    &.avatar-140{
        height: 140px;
        line-height: 140px;
        width: 140px;
    }
    &.avatar-150{
        height: 150px;
        line-height: 150px;
        width: 150px;
    }
}