У меня есть кнопка с иконкой с двумя строками, в которую я добавил ломать линию. Пока что кнопка отображает 3 строки. значок находится в верхней строке, следующая строка - первое предложение, а второе предложение - в третьей строке. Я нажал F12 и добавил text-align: left на .btn, и это потянуло влево по тексту внутри div, но я предпочитаю не использовать .btn в моем css файле, чтобы избежать влияния на другие кнопки. Я попробовал пользовательский класс css, но это не работает.
Мои мысли заключаются в переносе двух предложений в div и использовании пользовательского класса css для pull-left, который я пробовал с className = "pull-left", но не работает. Я думаю, мне нужно поместить значок и тексты div в другой div, чтобы выровнять значок и текст в одном ряду, но я не уверен, как это сделать.
Любая помощь приветствуется
JSX
<Button className={myStyle.iconButton}>
<i className="fa fa-user"/>
{"This is the first sentence"}<br/>
{"This is the second sentence"}
</Button>
CSS
.iconButton: цвет: # 000000 выравнивание текста: слева! Важно