Question posted in 
I am trying to create a page using twitter bootstrap.
My problem is font awesome icons are not working everywhere.As you can see in code i provided,in button amazon and cart icons displaying properly but dollar icon is not being displayed.Similarly Android icon working but battery and camera icons not working.What i am doing wrong here?
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 ">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_161ad3c12bc%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_161ad3c12bc%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.5%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
<div class="card-body">
<p class="card-text item-header"><i class="fa fa-hashtag"></i>1 Samsung galaxy note 8</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group mb-2">
<button type="button" class="btn btn-lg btn-outline-secondary amazon"><i class="fa fa-amazon"></i><a href="" > Amazon</a></button>
<button type="button" class="btn btn-lg btn-outline-secondary"><i class="fa fa-dollar-sign"></i> 400</button>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-lg btn-outline-secondary ebay"><i class="fa fa-shopping-cart"></i> Ebay</button>
<button type="button" class="btn btn-lg btn-outline-secondary">500</button>
</div>
</div>
</div>
</div>
<div class="spec">
<table class="table table-responsive table-striped">
<tbody>
<tr>
<th><i class="fa fa-android"></i> OS</th>
<td>Android Marshmallow 6.0</td>
</tr>
<tr>
<th>STORAGE</th>
<td>Internal: 32/64GB<br>
Expandable: Yes(128GB)</td>
</tr>
<tr>
<th>RAM</th>
<td>2/3/4GB</td>
</tr>
<tr>
<th><i class="fa fa-battery-bolt"></i> Battery & SIM</th>
<td>Dual Sim(1 nano and 1 micro)4GLTE<br>
4100mAh Non-Removable</td>
</tr>
<tr>
<th><i class="fa fa-camera-alt"></i> Camera</th>
<td>Rear:13MP (CMOS Camera,f2.0 Aperature)<br>
Front: 5MP (1080p Full HD Video Recording)
</td>
</tr>
<tr>
<th>Processor</th>
<td>Qualcomm Snapdragon 625 Octa-core<br>
Adreno 506</td>
</tr>
<tr>
<th>Dispaly</th>
<td>1920 x 1080 5.5 inch (401ppi)IPS LCD</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
2
Answers
There is a ‘pro license’ required for certain icons in font awesome. Try using fa-bolt and fa-camera instead. Also you can check icon reference at font awesome’s website and see which icons are free and which require license.
Fa-Dollar-Sign is with new latest pack, if you have old pack, dollar sign is fa-usd. It is pointed out on their website.