Как сделать небольшое пространство между иконкой и текстом?

Я изучаю Reactjs и JavaScript, и теперь у меня есть эта проблема, пожалуйста, посоветуйте

На этом изображении кнопка «Войти» не имеет пробела между значком и текстом.

Это код:

<li style = {{ listStyleType: 'none' }}>
    <a onClick = {onProfilePageClick} style = {{ display: 'flex' }} role = "presentation">
        <span className = "icon is-medium">
            <i className = "fas fa-user" />
        </span>
        <div>
            {authUser && Array.isArray(authUser.roles) && authUser.roles.includes(ROLES.USER) ? 
                    <div>Dashboard</div>
            ) : (
                <div>Sign in</div>
            )}
        </div>
    </a>
</li>

Это код пункта меню Search: между значком и текстом есть пробел.

        <li>
            <a onClick = {onSearchPageClick} role = "presentation">
                <span className = "icon is-medium">
                    <i className = "fas fa-search" />
                </span>{' '}
                Search
            </a>
        </li>

Я пытался добавить пробел перед текстом «Войти», но он не читается. Пожалуйста, посоветуйте!