CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Natesh bhat
Natesh bhat

Reputation: 13192

Setting display:none not working for fa icon

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

I am trying to make this closeButtonSmall class display:none but it doesn't hide the font at all.

.closeButtonSmall{
  display:none ; 
}

What might be the issues that are happening ?

Here is my whole css file . I am also using 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;
}

Upvotes: 1

Views: 3635

Answers (1)

Daniel Kormos
Daniel Kormos

Reputation: 280

It is may because your font awesome files loaded after your css. Try to add important to display none, or load your css after fa files loaded.

Upvotes: 4

Related Questions