[xF2] Estadisticas del Foro - Font Awesome

<xf:css src="istatistik.less" />
<div class="ist-anaalan"{{ widget_data($widget) }}>
        <div class="ist-kutu">
            <div class="ist-ic ist-ic-bosluk">


                <div class="ist-detay">
                    <div class="fa-icon  fa-renk1"><i class="fad fa-comment-lines"></i></div>
                    <p class="sayi">{$forumStatistics.threads|number}</p>
                    <span class="ist-bilgi">{{ phrase('threads') }}</span>
                </div>

            </div>
  
            <div class="ist-ic ist-ic-bosluk">
                <div class="ist-detay">
                    <div class="fa-icon fa-renk2"><i class="fad fa-comments"></i></div>             
                    <p class="sayi">{$forumStatistics.messages|number}</p>
                    <span class="ist-bilgi">{{ phrase('messages') }}</span>             
                </div>
            </div>     
  
            <div class="ist-ic ist-ic-bosluk">
                <div class="ist-detay">
                    <div class="fa-icon fa-renk3"><i class="fad fa-users"></i></div>
                <p class="sayi">{$forumStatistics.users|number}</p>
                <span class="ist-bilgi">{{ phrase('members') }}</span>         
                </div>
            </div>     
  
            <div class="ist-ic ist-ic-bosluk">
                <div class="ist-detay">
                    <div class="fa-icon  fa-renk4"><i class="fad fa-users-medical"></i></div>             
                <p><xf:username user="{$forumStatistics.latestUser}" /></p>
                <span class="ist-bilgi">{{ phrase('latest_member') }}</span>             
                </div>
      
                         </div>     
        </div>
    </div>

.ist-anaalan {
    margin-top: 20px;
}

.ist-kutu {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 10px;
}

.ist-ic {
    flex:25%;
}

.ist-detay {
    background-color: #dedede;
    box-shadow: 0px 5px 10px -4px rgba(0,0,0,0.29);
    padding: 5px 20px 5px 5px;
    text-align: center;
    border-radius: 50px;
}

.fa-renk1 {
    background-color: #22a720;
    color: #c9c9c9;
}

.fa-renk2 {
    background-color: #204492;
    color: #c9c9c9;
}

.fa-renk3 {