如何使用 font Awesome 图标作为 django 模板的文件上传输入字段作为引导程序？

Question

我使用 bootstrap 作为模板。该表单被设计为字体很棒的图标将成为设计中的文件上传字段。

有什么办法可以做到吗？我对此一无所知。我在这里分享模板代码。如果有人能帮助我，我将不胜感激。

谢谢。

  <form method="POST" action="{% url '' %}">
    {% csrf_token %}
    <div class="icons">
      <div class="row">
        <div class="col-4">
          <a href="#">
            <i class="fa fa-picture-o" aria-hidden="true"></i>
            <p>Gallery</p>
          </a>
        </div>
        <div class="col-4">
          <a href="#">
            <i class="fa fa-camera" aria-hidden="true"></i>
            <p>Camera</p>
          </a>
        </div>
        <div class="col-4">
          <a
            class=""
            href="#"
          >
            <i class="fa fa-microphone" aria-hidden="true"></i>
            <p>Audio</p>
          </a>
        </div>
      </div>
    </div>

    
    <div class="mb-3">
      <textarea
        class="form-control"
        id="exampleFormControlTextarea1"
        rows="8"
        placeholder="Type your question here"
        name="description"
      ></textarea>
    </div>

    <button type="submit" class="btn">Submit</button>
  </form>

Answer 1

我建议修改 FileInput 或 ClearableFileInput 小部件的 HTML 以选择您自己的字体真棒图标。 HTML 代码可以在 django 目录中找到：django.forms.templates.widgets。代码复杂但简短，在某个位置添加图标不会破坏任何内容。

然后，您需要创建一个新的自定义小部件并在表单类定义中使用它。这更容易，它看起来像：

class CustomFileInput(FileInput):
     template_file = '<you template file>'

要覆盖文件字段的小部件，请参阅此问题。