CODEWITHSUNDEEP
bootstrap-4font-awesome
espresso_coffee
espresso_coffee

Reputation: 6110

Fontawesome with Bootstrap 4 implement button with an icon?

I'm trying to implement fornawesome in bootstrap 4. So far I was able to get all the files, but icon is not showing on the screen. Can someone tell me what's wrong with my code?

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/fontawesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-12 text-center">
      <a class="btn btn-outline-success" href="#" title="Help Documentation">
        <i class="fa fa-info-circle"></i>
      </a>
      <button type="button" name="btn-help" class="btn btn-link" title="Help Documentation">
				<i class="fa fa-info-circle"></i>
			</button>
    </div>
  </div>
</div>

Upvotes: 3

Views: 3953

Answers (2)

Kaiser
Kaiser

Reputation: 2005

You need to replace the class fa for fas and change the link to the Font Awesome stylesheet as follows:

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

See your snippet working after those 2 changes:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-12 text-center">
      <a class="btn btn-outline-success" href="#" title="Help Documentation">
        <i class="fas fa-info-circle"></i>
      </a>
      <button type="button" name="btn-help" class="btn btn-link" title="Help Documentation">
				<i class="fas fa-info-circle"></i>
			</button>
    </div>
  </div>
</div>

Upvotes: 2

Nipun Tharuksha
Nipun Tharuksha

Reputation: 2567

The problem is that you are using fontawesome v5.9 . But you are using <i class="fa fa-info-circle"></i> which is in v4.7. There are two ways to fix this. You can add v4.7 cdn or just use fontawesomw v5.7 icons like <i class="fas fa-info-circle"></i> . you are missing s in fa.

use

<script src="https://kit.fontawesome.com/8b41a163ea.js"></script>

or 

<i class="fas fa-info-circle"></i>

Updated

I also tried with with <i class="fa fa-info-circle"></i> rather than using solid icons and changed the CDN which found through all fontawesome cdn links and its working perfectly. No need to change fontawesome icons by adding s you can replace your CDN like below and its woking in chrome and firefox

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

Upvotes: 7

Related Questions