CODEWITHSUNDEEP
css
HoBun Cheung
HoBun Cheung

Reputation: 31

Change Font Awesome Icon Using Css

HTML here

<div class="col-sm down-arrow">
  <i class="fas fa-arrow-right"></i>
</div>

I can do it with Javascript

var width = $(window).width();
if (width <= 768) {
    $('.down-arrow').find('.fas').removeClass('.fas fa-arrow-right').addClass('.fas fa-arrow-down');
}
else
    $('.down-arrow').find('.fas').removeClass('.fas fa-arrow-down').addClass('.fas fa-arrow-right');

But I want to do it with Css, because it can't responsive when change screen size smaller than 768 px

I have try use content:"\f063" font-family:FontAwesome

But it doesn't work

Please help

Thank you

Upvotes: 0

Views: 847

Answers (2)

HoBun Cheung
HoBun Cheung

Reputation: 31

I found a way do with Javascript.

Just add an EventListener with 'resize'

Here is the javascript code:

window.addEventListener('resize', ChangeIcon);
function ChangeIcon(){
    var width = $(window).width();
    if (width <= 768) {
        $('.down-arrow').find('.fas').removeClass('.fas fa-arrow-right').addClass('.fas fa-arrow-down');
    }
    else
        $('.down-arrow').find('.fas').removeClass('.fas fa-arrow-down').addClass('.fas fa-arrow-right');
}

Upvotes: 0

Gil
Gil

Reputation: 1804

Yes, you can do this with only CSS and media query. I've used this method myself, although I'll be the first to admit this is not really the best practice. So, keep that in mind.

The idea is to set the font awesome conditions on a custom class and then change the before value according to the screen width.

.sudo-fa-arrow {
  font-family: "Font Awesome 5 Free";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
}
.sudo-fa-arrow::before {
  content: "\f061"; /* The right arrow */
}
@media (max-width:768px) {
  .sudo-fa-arrow::before {
    content: "\f063"; /* The down arrow */
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<div class="col-sm down-arrow">
  <i class="sudo-fa-arrow"></i>
</div>

Upvotes: 1

Related Questions