CSS - круг с буквами посередине

Я пытаюсь сделать это

Как видите, значок не по центру. Я хочу, чтобы круг был немного «приподнят», чтобы он выглядел красиво.

Вот мой html (угловой):

// Компонент иконки

<div>
    <i><ng-content></ng-content></i>
</div>

// Родительский компонент

<div>
    <p>Connect with <app-initials-icon>OT</app-initials-icon> {{ contact }} </p>
</div>

// Для простоты (игнорируем angular, поэтому можете проигнорировать выше, если не знакомы)

<div>
    <p>Connect with
       <div> // the div that the css below applies to
           <i>OT</i>
       </div>
    </p>
</div>

Вот мой css

div {
    display: inline-block;

}

div i {
    text-align: center;
    border-radius: 50%;
    background-color: blue;
    color: white;
    font-size: 7px;
    padding: 3px;
    font-style: normal;
}

Есть идеи как?