使用语义 UI 添加 Font-Awesome 图标答案

【问题标题】：Adding Font-Awsome Icon with Semantic UI使用语义 UI 添加 Font-Awesome 图标
【发布时间】：2019-09-18 00:29:11
【问题描述】：

我有一个带有图标的语义 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>

非常感谢所有有关如何解决此问题的建议。

【问题讨论】：

你在用打字稿吗？
不在这个项目中:)
那么，无法添加图标是怎么回事？发生了什么错误或问题？
语法/编译错误
Semantic-UI-react有一套完整的FontAwesome图标，Dropdown有icon属性/prop<Dropdown icon="...." />不行？

标签： javascript reactjs font-awesome semantic-ui

【解决方案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

【讨论】：