Добавление Font-Awsome Icon с семантическим интерфейсом - PullRequest
Новая
       13

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

0 голосов
/ 29 апреля 2019

У меня есть семантическое меню пользовательского интерфейса с иконками, но в раскрывающемся меню я не могу добавить какие-либо значки. я хочу добавить <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>

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

1 Ответ

1 голос
/ 30 апреля 2019

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

...