CODEWITHSUNDEEP
htmlcsscss-selectorsfont-awesome
Asad Razaq
Asad Razaq

Reputation: 33

How to add FontAwsome Icon on HTML Button only using CSS?

I have an HTML button with icon in text format ">". I want to replace this text ">" with any FontAwsome icon but I don't have access to HTML, JS and PHP. I can only apply CSS. How to add FA icon using only css?

HTML Code:

<button type="button" role="presentation" class="owl-next">&gt;</button>

CSS Code I try to write:

.owl-next {
     font-family: Font Awesome;
     font-weight: 900;
     content: "\f007";
}

Link of the web page where this HTML button is used: http://35.154.177.245:8080/cblibrary/

Upvotes: 2

Views: 1691

Answers (2)

Or Nakash
Or Nakash

Reputation: 3329

I found an example that shows exactly how to do something similar, hope it helps:

Font Awesome in CSS

<style>
  .icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

  .login::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007";
  }

  .tps::before {
    font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f1ea";
  }

  .twitter::before {
    font-family: "Font Awesome 5 Brands"; content: "\f099";
  }
</style>

<ul style="margin: 0;">
  <li><span class="icon login"></span> Login</li>
  <li><span class="icon tps"></span> TPS Reports</li>
  <li><span class="icon twitter"></span> Twitter</li>
</ul>

You just need to adjust the code to your needs but it works.

** Edit:

Make sure you add this after the tags but before the closing tag in order to get the FontAwesome icons:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/fontawesome.min.css

Upvotes: 1

Rakesh Patil
Rakesh Patil

Reputation: 91

To Achieve this the icon on button you will have to use before Selector in CSS.

 .owl-next::before {
    font-family: Font Awesome;
    font-weight: 900;
    content: "\f007";
  }

Check this to See more examples

Upvotes: 1

Related Questions