How to solve Icon background distorted

Question

Sample Image the icon bg looks fine on single line sentence, but when the sentence too long or stack down, the icon is distorted, any way to solve it?

Below is the relative css:

.advantages-list li::before {
    content: '\f00c';
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    width: 20px;
    height: 20px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--global--color-primary);
    color: var(--global--color-white);
    margin-right: 15px;
    border-radius: 50%;
    font-size: 10px;
}