Fontawesome 5 SVG icons not staying inline with other elements like other icons

Question

Weird issue with fontawesome icons and semantic UI that I can't figure out. If I use the included icons with semantic UI everything works great and displays in the proper place.

If I use the fontawesome react component the icon ends up in some seemingly random place

code sandbox show the example https://codesandbox.io/embed/semantic-ui-example-i7o3w

Any help is much appreciated

Answer 1

It's because font-awesome icons are unstyled SVGs while Semantic-UI looks for a styled i element to display a font specific icon via a string.

To work around it, you'll basically have to do something like this:

<Search
  value="FA comp - broken"
  icon={
    <i className="icon">
      <FontAwesomeIcon 
        style={{ marginTop: 13 }} // alternatively you can do: position: "relative", top: 13
        icon="thumbs-down" 
      />
    </i>
  }
/>

Semantic-UI specifically looks for an i.icon element + classname to add styles to it: .ui.icon.input > i.icon. One of the many downsides of using a UI framework is that you're forced to work within its confined architecture.