Добавление иконки Font-Awsome с семантическим пользовательским интерфейсом

У меня есть семантическое меню пользовательского интерфейса со значками, но в раскрывающемся меню я не могу добавить никаких значков. Я хочу добавить <i className = "fa fa-gavel fa-lg"/> к первой строке.

     <Dropdown /*Here i want a font-awsome icon */ item text = "Language" pointing='left'>
         <Dropdown.Menu>
                 <Dropdown.Header><FormattedMessage id = "navigationBar.chooseLanguage"/></Dropdown.Header>
                 <Dropdown.Item onClick = {() => this.props.setLocale("en")}> <img src = {ENG} alt = "Eng" /> <p className = "lang"> English     </p> </Dropdown.Item> <hr/>
                 <Dropdown.Item onClick = {() => this.props.setLocale("se")}> <img src = {SWE} alt = "Swe" /> <p className = "lang"> Svenska     </p> </Dropdown.Item> <hr/>
                 <Dropdown.Item onClick = {() => this.props.setLocale("de")}> <img src = {DEN} alt = "Den" /> <p className = "lang"> Dansk       </p> </Dropdown.Item> <hr/>
                 <Dropdown.Item onClick = {() => this.props.setLocale("no")}> <img src = {NOR} alt = "Nor" /> <p className = "lang"> Norsk       </p> </Dropdown.Item>
         </Dropdown.Menu>
     </Dropdown>

Все предложения о том, как решить эту проблему, высоко ценятся.

вы используете машинопись?

Amir-Mousavi 29.04.2019 13:34

Не в этом проекте :)

Arasto 29.04.2019 13:36

Итак, что происходит, что вы не можете добавить значок? какая ошибка или проблема происходит?

Amir-Mousavi 29.04.2019 13:36

Ошибка синтаксиса/компиляции

Arasto 29.04.2019 13:39

Semantic-UI-react имеет полный набор иконок FontAwesome, а Dropdown имеет icon атрибут/реквизит <Dropdown icon = "...." /> не работает?

Amir-Mousavi 29.04.2019 13:39

а что это Syntax/Compile error? какой код вы добавили, который получает эту ошибку? почему вы не указали этот код в вопросе?

Amir-Mousavi 29.04.2019 13:41
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
6
421
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

SUIR поддерживает как значки, так и флаги FA, попробуйте использовать следующий код.

<Dropdown
  options = {[
    { text: 'English', value: 'en', flag: 'gb' },
    { text: 'Svenska', value: 'se', flag: 'se' },
    { text: 'Dansk', value: 'de', flag: 'de' },
    { text: 'Norsk', value: 'no', flag: 'no' },
  ]}
  text = "Language"
  icon = "gavel"
  pointing = "left"
/>

https://codesandbox.io/s/405kw8w3n9?fontsize=14&module=%2Fexample.js

Другие вопросы по теме