how to use font awesome icon as file upload input field for django template as bootstrap?

Question

I am using bootstrap as the template. The form is designed as the font awesome icon will be the file upload field in the design.

Is there any way to do it? I have no idea about that. I am sharing the template code here. If anyone can help me, I will be grateful.

Thanks.

  <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

I suggest modifying the HTML of the FileInput or ClearableFileInput widget to choose your own font awesome icon. The HTML code can be found in the django directory: django.forms.templates.widgets. The code is complex but short, and adding an icon in a place won't break anything.

Then you need to create a new custom widget and use it in your form class definition. This is much easier and it look something like:

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

To override the widget for a file field see this question.