时间戳

首页 > 解决方案 > React Fontawesome CSS 伪元素不在 div 内呈现，但在 Codepen 中工作

css - React Fontawesome CSS 伪元素不在 div 内呈现，但在 Codepen 中工作

问题描述

我正在运行一个 React 应用程序，我需要在这个 Codepen中的选择表单字段内呈现一个 FontAwesome 图标

为了实现这一点，我使用 CSS Pseudo Elements, :after 具体定义为here

不幸的是，这在这个 CodePen中运行良好，但它不会在我的应用程序的 div 中呈现。我得到一个框，显示 FontAwesome 图标未呈现，实际图标出现在选择输入之后。请参阅下图了解它的外观。

React Fontawesome 渲染截图

CSS

.selectdiv {
  position: relative;
}

.selectdiv:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f107";
  color: rgb(75,173,233);
  right: 0rem;  
  top: 0.3rem;
  height: 2rem;
  padding: 0rem 0rem 0rem  0rem;
  position: absolute;
  pointer-events: none;
}

/* IE11 hide native button*/
select::-ms-expand {
  display: none;
}

.selectdiv select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: rgb(75,173,233);
  background-color: #ffffff;
  background-image: none;
  -ms-word-break: normal;
  word-break: normal;
}

索引.html

 <!-- FontAwesome Pseudo Elements Config -->
    <script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js" data-search-pseudo-elements></script>  
    <script>
      window.FontAwesomeConfig = {
        searchPseudoElements: true
      }
    </script>

标签： cssreactjsfont-awesome-5react-font-awesome

解决方案

在这里找到了答案

我遵循“旧方式”。

我将此行添加到 index.html

<link href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet">

我的 CSS 现在看起来像这样

.selectdiv {
  position: relative;
}

.selectdiv::after {
  font-family: "Font Awesome\ 5 Free";
  content: "\f107";
  font-weight: 600;
  color: rgb(75,173,233);
  right: 0rem;
  top: 0.3rem;
  height: 2rem;
  padding: 0.2rem 0rem 0rem  0rem;
  position: absolute;
  pointer-events: none;
}


/* IE11 hide native button*/
select::-ms-expand {
  display: none;
}

.selectdiv select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: rgb(75,173,233);
  background-color: #ffffff;
  background-image: none;
  -ms-word-break: normal;
  word-break: normal;
}

推荐阅读