0

我给 HTML 的负责人提供了很棒的字体脚本，但它显示的是正方形而不是图标。代码是：

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" href="{% static "all.css" %}">
      <link rel="stylesheet" href="{% static "bootstrap.css" %}">
      <link rel="stylesheet" href="{%static "style.css" %}">
      <link href="https://fonts.googleapis.com/css2?family=Candal&family=Lora&display=swap" rel="stylesheet">
      <title>Online yuridik xizmatlar</title>
      <script src="//code.jivosite.com/widget/pvNOxCEa74" async></script>
    <!--Font Awesome -->
       <script src="https://use.fontawesome.com/6cd0e4d425.js"></script>
    <style>
      #loader{
        position: fixed;
        width: 100%;
        height: 100vh;
        background: #000000
        url('../static/contact/images/Infinity-1s-200px.gif') no-repeat center;
        z-index: 99999;
      }
    </style>
     
    </head>

     <div id="home-icons" class="my-5 text-center">
       <div class="container">
         <div class="row">
           <div class="col-md-4">
            <i class="fab fa-telegram-plane fa-3x mb-3"></i>
            <h3>Telegramdagi kanal</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sapiente?</p>
           </div>
           <div class="col-md-4">
            <i class="fab fa-facebook-f fa-3x mb-3"></i>
            <h3>Facebookdagi sahifa</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sapiente?</p>
           </div>
           <div class="col-md-4">
            <i class="fab fa-instagram fa-3x mb-3"></i>
            <h3>Instagramdagi sahifa</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sapiente?</p>
           </div>
         </div>
       </div>
     </div>
    
    
     <div id="bg-box" class= "text-center text-white">
       <div class="dark-overlay py-5">
         <div class="container">
           <h1>Bizni ijtimoiy tarmoqlarda kuzating</h1>
           <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius iure, officiis magni delectus corrupti dolorum?</p>
         </div>
       </div>
    </div>
<div class="about-icons pb-5 my-5">
  <div class="container text-white text-center">
    <div class="row">
      <div class="col-md-4">
        <div class="card bg-danger p-4 my-4">
          <i class="fas fa-building fa-3x"></i>
          <h3>Sample</h3>
          <p class="m-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim adipisci quisquam voluptatum voluptatibus quas officiis.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card bg-dark p-4 my-4">
          <i class="fas fa-bullhorn fa-3x"></i>
          <h3>Sample</h3>
          <p class="m-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim adipisci quisquam voluptatum voluptatibus quas officiis.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card bg-danger p-4 my-4">
          <i class="fas fa-comments fa-3x"></i>
          <h3>Sample</h3>
          <p class="m-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim adipisci quisquam voluptatum voluptatibus quas officiis.</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <div class="card bg-dark p-4 my-4">
          <i class="fas fa-box fa-3x"></i>
          <h3>Sample</h3>
          <p class="m-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim adipisci quisquam voluptatum voluptatibus quas officiis.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card bg-danger p-4 my-4">
          <i class="fas fa-credit-card fa-3x"></i>
          <h3>Sample</h3>
          <p class="m-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim adipisci quisquam voluptatum voluptatibus quas officiis.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card bg-dark p-4 my-4">
          <i class="fas fa-coffee fa-3x"></i>
          <h3>Sample</h3>
          <p class="m-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim adipisci quisquam voluptatum voluptatibus quas officiis.</p>
        </div>
      </div>
    </div>
    
  </div>
</div>

这是我的代码，在这里您可以在 body 和 head 标签中找到图标部分的所有详细信息。我尝试了几种方法，但没有得到我认为我在代码中搞砸了等待您的帮助！

4

1 回答 1

0

提供更多详细信息，例如显示图标的位置。这很可能不是脚本的问题，而是您指定图标的方式。您尝试显示的图标很有可能是优质的。或者您使用fa fas了代替fa fa或类似的东西。发布其余代码以获得更具体的答案。

根据您的编辑，字体真棒链接指向以前的版本并且没有这种语法，所以使用fa fa代替fas faor fab fa。

于 2020-09-12T17:43:34.927 回答