Fontawesome 5 SVG 图标不像其他图标那样与其他元素保持一致

Question

fontawesome 图标和语义的奇怪问题 UI 我无法弄清楚。如果我使用带有语义 UI 的包含图标，一切都很好，并显示在适当的位置。

如果我使用 fontawesome react 组件，图标最终会出现在一些看似随机的地方

代码沙箱显示示例https://codesandbox.io/embed/semantic-ui-example-i7o3w

非常感谢任何帮助

Answer 1

这是因为 font-awesome 图标没有样式 SVG，而 Semantic-UI 寻找样式化的 i 元素以通过 string 显示字体特定图标.

要解决这个问题，您基本上必须这样做：

<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 专门寻找一个 i.icon 元素 + 类名来为其添加样式：.ui.icon.input > i.icon。使用 UI 框架的众多缺点之一是您被迫在其受限的架构内工作。

Answer 2

作为对 Matt 的大力帮助的跟进 - 我深入研究了语义-ui LESS 库，并找出了 fontawesome 需要的覆盖以使其表现得很好。

这里是 icon.overrides 和 input.overrides 以及 fontawesome 正常运行所需的一些注释。

使用最新的 fontawesome 版本 (5.10.2)，大小问题通常在库中得到解决，因此我之前遇到的大多数显示问题都不是问题。

/* 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;
}

Fontawesome 5 SVG 图标不像其他图标那样与其他元素保持一致

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

font-awesome

reactjs

semantic-ui

font-awesome-5

semantic-ui-react