Question

 <i className="fa fa-close closeButtonSmall" onClick={e => removeColumn(id)} ></i>

我正在尝试使closeButtonSmall类为display:none，但它根本没有隐藏字体。

.closeButtonSmall{
  display:none ; 
}

可能正在发生什么问题？

这是我的整个CSS文件。我也在使用Bootstrap 4 btw。

.d-inline{
  display:inline ;
}

.closeButton{
  color:red  ;
  float : right ; 
  transition: all 0.3s ; 
  margin-top : -20px ; 
}

.closeButtonSmall{
  display:none ; 
  transition: all 0.3s ease-in-out;
  color:red  ;
  float : right ; 
  position: relative;
  top:-10px;
  right:-15px;
}

.closeButton:hover , .closeButtonSmall:hover{
  color: #eee ; 
  background-color:orangered ; 
}

.tabChoosePanel{
  background-color: rgba(216, 216, 216 ,0.8 );
}

.tabChooseItem{
  transition:  all 0.7s ; 
  flex-grow: 1;
  font-size:150%;
}

.tabChooseItem:hover{
  transition:  all 1s ; 
  cursor: pointer;
  user-select: none;
  background-color: rgba(150, 128, 209, 0.5);
  flex-grow:1.2 ;
  font-size:200%;
}

.tabChooseItem:active{
  transition:  all 0.1s ease-in-out ; 
  background-color: rgba(146, 127, 200, 0.6);
}

.columnAddArrow{
  transition: all 0.3s ease-in-out; 
  border: 2px dotted brown ;
  padding:35px;
  opacity: 0.3 ; 
}

.columnAddArrow:hover{
  opacity: 1 ; 
  font-size: 120%;
  border:2px dashed black ;
}
.columnAddArrow:active{
  font-size: 140%;
  color:green;
}

/* THIS THE STYLE FOR  VariableNameWithNumbers component */
.columnFormatBlock{
  border: 1px solid green ; 
  margin : 2px 10px 0 10px ;
}
.columnFormatBlock:hover .closeButtonSmall{
  display:inline;
}

.numberOptionBox{
  border: 2px dotted blueviolet ; 
  border-radius: 10px ; 
}

.columnText{
  border : 1px dashed black ;
  border-radius:10px ;
  color:black ;
  font-size:110%;
  background-color: rgba(230, 230, 230, 0.774) ;
}

.resultDisplayGrid .outputStringTextArea{
  width:70%; 
  height: 12em;
}

Answer 1

可能是因为在CSS之后加载了字体很棒的文件。尝试添加重要内容以使其不显示任何内容，或者在加载fa文件后加载CSS。

设置显示：无不适用于fa图标

1 个答案: