Question

我正在尝试使用twitter bootstrap创建一个页面。我的问题是字体真棒图标无处不在。正如你可以看到我提供的代码，按钮亚马逊和购物车图标显示正常但美元图标没有显示。类似Android图标工作但电池和相机图标不工作。我是什么我在这里做错了吗？

<!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&amp;bg=55595c&amp;fg=eceeef&amp;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>

Answer 1

有一个专业许可证＆＃39;字体中的某些图标需要很棒。尝试使用fa-bolt和fa-camera代替。您也可以在font awesome的网站上查看icon reference，看看哪些图标是免费的，哪些图标需要许可。

Answer 2

Fa-Dollar-Sign是新的最新包装，如果你有旧包装，美元符号就可以了。在their website上指出了它。

font-awesome图标没有显示在某个元素中

2 个答案: