i.circulo {
    display: inline-block;
    text-align: center;
    color: #fff;
    width: 1.8em;
    height: 1.8em;
    padding-top: 0.4em;
    border-radius: 50%;
    font-size: 4em;
}

i.rojo {
    background-color: #e62117;
}

i.naranja {
    background-color: #e27624;
}

i.amarillo {
    background-color: #ffdd55;
}

i.rosa {
    background-color: #ff5555;
}

i.azul {
    background-color: #005088;
}

i.violeta {
    background-color: #bc5fd3;
}

i.verde {
    background-color: #67a911;
}

i.negro {
    background-color: #000000;
}

i.gris {
    background-color: #666666;
}

i.celeste {
    background-color: #159cd6;
}