CODEWITHSUNDEEP
htmlcssbootstrap-4icons
harry
harry

Reputation: 61

Change fa icon from css

Here I have a fa icon inside an arrow, I wanna change it for fa fa-plus-square, but no touching html, instead make it from css. How to achieve it?

<div class="footer-text">
   <h4 itemprop="name">LOREM IPSUM</h4>
   <p class="text" itemprop="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa...</p>
   <span class="arrow"><i class="fa fa-chevron-right"></i></span>
</div>

Upvotes: 2

Views: 8349

Answers (2)

zmag
zmag

Reputation: 8241

To override Fontawesome icon, the character code of fa-plus-square is required.

Ref: plus-square

the character code of plus-square is f0fe. you just need to override fa-chevron-right:before with it.

span.arrow > i.fa.fa-chevron-right:before {
  content: "\f0fe";
}

Complete Snippet:

span.arrow > i.fa.fa-chevron-right:before {
  content: "\f0fe";
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">

<div class="footer-text">
  <h4 itemprop="name">LOREM IPSUM</h4>
  <p class="text" itemprop="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa...</p>
  <span class="arrow"><i class="fa fa-chevron-right"></i></span>
</div>

Upvotes: 2

gmotzespina
gmotzespina

Reputation: 151

You could modify the font-awesome.css and change the code inside the fa-chevron-right class to be a different icon, or just in a different css file add the fa-chevron-right class and add the necsary code to display the icon you want but you have to be sure that the new css file is declared after the font awesome file.

Upvotes: 0

Related Questions