如何在Django中显示图标？

2024-05-12 20:10:40 发布

您现在位置：Python中文网/ 问答频道 /正文
502 3

我给了我的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标签中找到图标部分的所有详细信息。我尝试了几种方法，但没有得到我认为smth我在代码中搞砸了等待您的帮助


Tags： divmycolmdh3classfaipsum
1条回答
网友
1楼 · 发布于 2024-05-12 20:10:40

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

根据您的编辑，font awesome链接指向以前的版本，并且没有此语法，因此请使用fa fa而不是fas fa或fab fa

相关问题 更多 >

    编程相关推荐