Значок Fontawesome внутри группы ввода Reactstrap
Я пытаюсь разместить значки рядом с полями ввода, и когда я вставляю компонент FontAwesomeIcon внутрь компонента InputGroupAddon, он выглядит не так, как должен быть. Вот мой пример кода. Что я хочу получить: скриншот 1. Что я действительно получаю: скриншот 2.
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов
Проще говоря, компонент - это фабрика для создания элементов.
2
1
5 331
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Ответ принят как подходящий
Вам нужно поместить компонент FontAwesomeIcon внутри тега span
<span className = "input-group-text"><FontAwesomeIcon icon = {faUser} /></span>
Спасибо. Добавление className = "input-group-text" к <InputGroupAddon /> также работает.
—
09.04.2019 07:28
в качестве альтернативы вы можете использовать InputGroupText
<InputGroup>
<InputGroupAddon addonType = "prepend">
<InputGroupText>
<i class = "fa fa-arrow-circle-left" aria-hidden = "true" style = {{color:'#675cff', fontSize: 18}}>
</i>
</InputGroupText>
</InputGroupAddon>
<Input Style = {{ backgroundColor: 'white', color:'Black'}} placeholder = "Enter Name">
</Input>
</InputGroup>
Другие вопросы по теме
Я не могу позволить контейнеру реагировать, когда я нажимаю на переключение устройства в инструменте chrome dev
PHP с всплывающим окном Bootstrap не отображает кнопки и формы
Bootstrap 4 позиция исправлена с неработающим наследованием ширины
Как сделать так, чтобы столбец растягивался только на определенной точке останова?
Выравнивание выпадающего меню boostrap
Bootstrap Желоба
Как в Bootstrap выровнять текст по левому краю?
Как правильно удалить загрузочную CDN из `assets.precompile` и изолировать таблицы стилей контроллера
В Bootstrap, как мне выровнять мою кнопку по левому краю с элементом выше?
Разрыв строки в div перед укладкой div
Похожие вопросы
Вызвать функцию React render() вручную?
React Hooks — useReducer: подождите, пока редуктор завершится, прежде чем запускать функцию
Как исправить «Невозможно прочитать параметры свойства null» в этом коде?
Как вы оборачиваете четыре карты вокруг центральной карты?
DragControls с модулем three.js не работает на Node.js и React
Как исправить ошибку «Ожидается, что возвращаемое значение будет 31-битным целым числом»
Как заставить «педантичных» ошибок постоянно устанавливать типы?
Модальный внутри таблицы в MDBootstrap для reactjs
React - условие componentWillReceiveProps не отображает данные в компоненте
Возврат html из fetch() и показ пользователю
Пожалуйста, поместите свой пример кода как часть вопроса (а не как ссылку).