Question

我有一个带有图标的语义UI菜单，但是在下拉展开菜单选项上，我似乎无法添加任何图标。我希望将<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>

非常感谢您提供有关解决此问题的所有建议。

Answer 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

使用语义UI添加字体惊人的图标

1 个答案: