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

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.

Answer 2

As follow up to Matt's great help - I dug in to the semantic-ui LESS library and figured out the overrides needed for fontawesome to behave pretty well with it.
here are the icon.overrides and input.overrides with a few notes that are needed for fontawesome to behave nicely.
With the newest fontawesome version (5.10.2) the sizing issues are generally addressed in-library so most display issues that I previous encountered are not a problem.
/* site/elements/input.overrides */
/* just the overrides to replace i for ANYTHING icon so we can use font awesome
semantic always assumes the icon is ONLY an i - that's it - we so far have a link / an A and a span and an svg element
for semantic - SO I'm just going to pull out all the hardcodes and just go with .icon and see how that behaves
just make sure the top level element for the 'icon' has the class 'icon' and you *should* be good don't put icon on every
child element - or rather you don't have to...
SVGs get squared nicely - anything else will need moving
*/
/*--------------------
Loading
---------------------*/
.ui.loading.loading.input > .icon:before {
position: absolute;
content: '';
top: 50%;
left: 50%;
margin: #loaderMargin;
width: #loaderSize;
height: #loaderSize;
border-radius: #circularRadius;
border: #loaderLineWidth solid #loaderFillColor;
}
.ui.loading.loading.input > .icon:after {
position: absolute;
content: '';
top: 50%;
left: 50%;
margin: #loaderMargin;
width: #loaderSize;
height: #loaderSize;
animation: button-spin #loaderSpeed linear;
animation-iteration-count: infinite;
border-radius: #circularRadius;
border-color: #loaderLineColor transparent transparent;
border-style: solid;
border-width: #loaderLineWidth;
box-shadow: 0px 0px 0px 1px transparent;
}
/* Transparent Icon */
.ui.transparent.icon.input > .icon {
width: #transparentIconWidth;
}
/*--------------------
Icon
---------------------*/
.ui.icon.input > .icon {
cursor: default;
position: absolute;
line-height: 1;
text-align: center;
top: 0px;
right: 0px;
margin: 0em;
height: 100%;
width: #iconWidth;
opacity: #iconOpacity;
border-radius: 0em #borderRadius #borderRadius 0em;
transition: #iconTransition;
}
.ui.icon.input > .icon:not(.link) {
pointer-events: none;
}
.ui.icon.input > .icon:before,
.ui.icon.input > .icon:after {
left: 0;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
margin-top: #iconOffset;
}
.ui.icon.input > .link.icon {
cursor: pointer;
}
.ui.icon.input > .circular.icon {
top: #circularIconVerticalOffset;
right: #circularIconHorizontalOffset;
}
/* Left Icon Input */
.ui[class*="left icon"].input > .icon {
right: auto;
left: #borderWidth;
border-radius: #borderRadius 0em 0em #borderRadius;
}
.ui[class*="left icon"].input > .circular.icon {
right: auto;
left: #circularIconHorizontalOffset;
}
/* Focus */
.ui.icon.input > input:focus ~ .icon {
opacity: 1;
}
/* site/elements/icon.overrides */
/*!
refactored these to be a svg rather than i . so they can be svg icons for font awesome
straight copy and paste from https://github.com/Semantic-Org/Semantic-UI-LESS/blob/master/definitions/elements/icon.less
regex find and replace find: \ni. replace \nsvg.
DO NOT COPY THE LAST LINE OF THE FILE - otherwise you'll end up in an endless loop compiling
also don't copy the theme section - it's unneeded
*/
svg.icon {
display: inline-block;
opacity: #opacity;
margin: 0em #distanceFromText 0em 0em;
width: #width;
height: 100%;
font-family: 'Icons';
font-style: normal;
font-weight: #normal;
text-decoration: inherit;
text-align: center;
speak: none;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
backface-visibility: hidden;
}
svg.icon:before {
background: none !important;
}
/*******************************
Types
*******************************/
/*--------------
Loading
---------------*/
svg.icon.loading {
height: 1em;
line-height: 1;
animation: icon-loading #loadingDuration linear infinite;
}
#keyframes icon-loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*******************************
States
*******************************/
svg.icon.hover {
opacity: 1 !important;
}
svg.icon.active {
opacity: 1 !important;
}
svg.emphasized.icon {
opacity: 1 !important;
}
svg.disabled.icon {
opacity: #disabledOpacity !important;
}
/*******************************
Variations
*******************************/
/*-------------------
Fitted
--------------------*/
svg.fitted.icon {
width: auto;
margin: 0em !important;
}
/*-------------------
Link
--------------------*/
svg.link.icon, svg.link.icons {
cursor: pointer;
opacity: #linkOpacity;
transition: opacity #defaultDuration #defaultEasing;
}
svg.link.icon:hover, svg.link.icons:hover {
opacity: 1 !important;
}
/*-------------------
Circular
--------------------*/
svg.circular.icon {
border-radius: 500em !important;
line-height: 1 !important;
padding: #circularPadding !important;
box-shadow: #circularShadow;
width: #circularSize !important;
height: #circularSize !important;
}
svg.circular.inverted.icon {
border: none;
box-shadow: none;
}
/*-------------------
Flipped
--------------------*/
svg.flipped.icon,
svg.horizontally.flipped.icon {
transform: scale(-1, 1);
}
svg.vertically.flipped.icon {
transform: scale(1, -1);
}
/*-------------------
Rotated
--------------------*/
svg.rotated.icon,
svg.right.rotated.icon,
svg.clockwise.rotated.icon {
transform: rotate(90deg);
}
svg.left.rotated.icon,
svg.counterclockwise.rotated.icon {
transform: rotate(-90deg);
}
/*-------------------
Bordered
--------------------*/
svg.bordered.icon {
line-height: 1;
vertical-align: baseline;
width: #borderedSize;
height: #borderedSize;
padding: #borderedVerticalPadding #borderedHorizontalPadding !important;
box-shadow: #borderedShadow;
}
svg.bordered.inverted.icon {
border: none;
box-shadow: none;
}
/*-------------------
Inverted
--------------------*/
/* Inverted Shapes */
svg.inverted.bordered.icon,
svg.inverted.circular.icon {
background-color: #black !important;
color: #white !important;
}
svg.inverted.icon {
color: #white;
}
/*-------------------
Colors
--------------------*/
/* Red */
svg.red.icon {
color: #red !important;
}
svg.inverted.red.icon {
color: #lightRed !important;
}
svg.inverted.bordered.red.icon,
svg.inverted.circular.red.icon {
background-color: #red !important;
color: #white !important;
}
/* Orange */
svg.orange.icon {
color: #orange !important;
}
svg.inverted.orange.icon {
color: #lightOrange !important;
}
svg.inverted.bordered.orange.icon,
svg.inverted.circular.orange.icon {
background-color: #orange !important;
color: #white !important;
}
/* Yellow */
svg.yellow.icon {
color: #yellow !important;
}
svg.inverted.yellow.icon {
color: #lightYellow !important;
}
svg.inverted.bordered.yellow.icon,
svg.inverted.circular.yellow.icon {
background-color: #yellow !important;
color: #white !important;
}
/* Olive */
svg.olive.icon {
color: #olive !important;
}
svg.inverted.olive.icon {
color: #lightOlive !important;
}
svg.inverted.bordered.olive.icon,
svg.inverted.circular.olive.icon {
background-color: #olive !important;
color: #white !important;
}
/* Green */
svg.green.icon {
color: #green !important;
}
svg.inverted.green.icon {
color: #lightGreen !important;
}
svg.inverted.bordered.green.icon,
svg.inverted.circular.green.icon {
background-color: #green !important;
color: #white !important;
}
/* Teal */
svg.teal.icon {
color: #teal !important;
}
svg.inverted.teal.icon {
color: #lightTeal !important;
}
svg.inverted.bordered.teal.icon,
svg.inverted.circular.teal.icon {
background-color: #teal !important;
color: #white !important;
}
/* Blue */
svg.blue.icon {
color: #blue !important;
}
svg.inverted.blue.icon {
color: #lightBlue !important;
}
svg.inverted.bordered.blue.icon,
svg.inverted.circular.blue.icon {
background-color: #blue !important;
color: #white !important;
}
/* Violet */
svg.violet.icon {
color: #violet !important;
}
svg.inverted.violet.icon {
color: #lightViolet !important;
}
svg.inverted.bordered.violet.icon,
svg.inverted.circular.violet.icon {
background-color: #violet !important;
color: #white !important;
}
/* Purple */
svg.purple.icon {
color: #purple !important;
}
svg.inverted.purple.icon {
color: #lightPurple !important;
}
svg.inverted.bordered.purple.icon,
svg.inverted.circular.purple.icon {
background-color: #purple !important;
color: #white !important;
}
/* Pink */
svg.pink.icon {
color: #pink !important;
}
svg.inverted.pink.icon {
color: #lightPink !important;
}
svg.inverted.bordered.pink.icon,
svg.inverted.circular.pink.icon {
background-color: #pink !important;
color: #white !important;
}
/* Brown */
svg.brown.icon {
color: #brown !important;
}
svg.inverted.brown.icon {
color: #lightBrown !important;
}
svg.inverted.bordered.brown.icon,
svg.inverted.circular.brown.icon {
background-color: #brown !important;
color: #white !important;
}
/* Grey */
svg.grey.icon {
color: #grey !important;
}
svg.inverted.grey.icon {
color: #lightGrey !important;
}
svg.inverted.bordered.grey.icon,
svg.inverted.circular.grey.icon {
background-color: #grey !important;
color: #white !important;
}
/* Black */
svg.black.icon {
color: #black !important;
}
svg.inverted.black.icon {
color: #lightBlack !important;
}
svg.inverted.bordered.black.icon,
svg.inverted.circular.black.icon {
background-color: #black !important;
color: #white !important;
}
/*-------------------
Sizes
--------------------*/
svg.mini.icon,
svg.mini.icons {
line-height: 1;
font-size: #mini;
}
svg.tiny.icon,
svg.tiny.icons {
line-height: 1;
font-size: #tiny;
}
svg.small.icon,
svg.small.icons {
line-height: 1;
font-size: #small;
}
svg.icon,
svg.icons {
font-size: #medium;
}
svg.large.icon,
svg.large.icons {
line-height: 1;
vertical-align: middle;
font-size: #large;
}
svg.big.icon,
svg.big.icons {
line-height: 1;
vertical-align: middle;
font-size: #big;
}
svg.huge.icon,
svg.huge.icons {
line-height: 1;
vertical-align: middle;
font-size: #huge;
}
svg.massive.icon,
svg.massive.icons {
line-height: 1;
vertical-align: middle;
font-size: #massive;
}
/*******************************
Groups
*******************************/
svg.icons {
display: inline-block;
position: relative;
line-height: 1;
}
svg.icons .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
margin: 0em;
margin: 0;
}
svg.icons .icon:first-child {
position: static;
width: auto;
/* height: auto; */
vertical-align: top;
transform: none;
margin-right: #distanceFromText;
}
/* Corner Icon */
svg.icons .corner.icon {
top: auto;
left: auto;
right: 0;
bottom: 0;
transform: none;
font-size: #cornerIconSize;
text-shadow: #cornerIconShadow;
}
svg.icons .top.right.corner.icon {
top: 0;
left: auto;
right: 0;
bottom: auto;
}
svg.icons .top.left.corner.icon {
top: 0;
left: 0;
right: auto;
bottom: auto;
}
svg.icons .bottom.left.corner.icon {
top: auto;
left: 0;
right: auto;
bottom: 0;
}
svg.icons .bottom.right.corner.icon {
top: auto;
left: auto;
right: 0;
bottom: 0;
}
svg.icons .inverted.corner.icon {
text-shadow: #cornerIconInvertedShadow;
}