CODEWITHSUNDEEP
htmlcsssvgfont-awesome
Yaroslav Saenko
Yaroslav Saenko

Reputation: 587

hover not working with font-awesome icon

Here is some html and css. I need to show arrow on hover inside link, but I can't do this. How can I fix it?

.header-text-links a {
  display: block;
  width: 278px;
  height: 55px;
  padding: 0px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fab608;
  color: #fab608;
  font-size: 18px;
  font-family: "Futura Demi";
  text-transform: uppercase;
}

.header-text-links a .svg-inline--fa {
  display: none;
}

.header-text-links a:hover {
  color: white;
  background: #fab608;
  text-decoration: none;
  justify-content: space-around;
}

.header-text-links a:hover .header-text-links a .svg-inline--fa {
  display: block;
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js"></script>
<div class="header-text-links">
  <a class="header-text-links__works" href="#">Some text<i class="fas fa-arrow-right"></i></a>
</div>

Also, I tried to get icon by classes .fas, .fa-arrow-right even try to get path tag, but the result is the same

Upvotes: 2

Views: 1912

Answers (2)

Korah Babu Varghese
Korah Babu Varghese

Reputation: 70

Best solution Only change in css

.header-text-links a:hover > .svg-inline--fa {
    display: inline-block !important;
}


.header-text-links a {
	display: block;
	width: 278px;
	height: 55px;
	padding: 0px 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #fab608;
	color: #fab608;
	font-size: 18px;
	font-family: "Futura Demi";
	text-transform: uppercase;
}
.header-text-links a .svg-inline--fa {
	display: none;
}
.header-text-links a:hover {
	color: white;
	background: #fab608;
	text-decoration: none;
	justify-content: space-around;
}

.header-text-links a:hover > .svg-inline--fa {
	display: inline-block !important;
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js"></script>
<div class = "header-text-links">
<a class = "header-text-links__works" href = "#">Some text<i class="fas fa-arrow-right"></i></a>
</div>

Upvotes: 1

Bhuwan
Bhuwan

Reputation: 16855

You are using wrong selector...try .header-text-links a:hover .svg-inline--fa

Why?

For better understanding remove :hover for just once, so it will look like

.header-text-links a .header-text-links a .svg-inline--fa

which means it will target .svg-inline--fa inside .header-text-links a again inside .header-text-links a

.header-text-links a {
  display: block;
  width: 278px;
  height: 55px;
  padding: 0px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fab608;
  color: #fab608;
  font-size: 18px;
  font-family: "Futura Demi";
  text-transform: uppercase;
}

.header-text-links a .svg-inline--fa {
  display: none;
}

.header-text-links a:hover {
  color: white;
  background: #fab608;
  text-decoration: none;
  justify-content: space-around;
}

.header-text-links a:hover .svg-inline--fa {
  display: block;
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js"></script>
<div class="header-text-links">
  <a class="header-text-links__works" href="#">Some text<i class="fas fa-arrow-right"></i></a>
</div>

Upvotes: 5

Related Questions