如何在Semantic UI下拉菜单中添加Font Awesome图标

很简单，直接把你准备的Font Awesome图标组件放到目标Dropdown.Item内部就可以了——Semantic UI的Dropdown.Item支持嵌套任意React元素，和你已经放进去的图片、段落标签放在一起就行。

修改后的完整代码如下：

<Dropdown item text="Language" pointing='left'>
  <Dropdown.Menu>
    <Dropdown.Header><FormattedMessage id="navigationBar.chooseLanguage"/></Dropdown.Header>
    {/* 已添加Font Awesome图标到第一个下拉选项 */}
    <Dropdown.Item onClick={() => this.props.setLocale("en")}>
      <i className="fa fa-gavel fa-lg"/>
      <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>

额外提醒两点：

• 如果图标显示异常，先检查你的项目是否正确引入了Font Awesome的资源（不管是通过CDN链接还是npm包安装的方式）；
• 要是想调整图标和其他元素的间距、对齐方式，可以给图标标签加自定义className或者用Semantic UI的内置样式类来优化。

内容的提问来源于stack exchange，提问作者Arasto