Как использовать иконку font awesome в качестве поля ввода для загрузки файлов в шаблоне django в качестве bootstrap?

В качестве шаблона я использую bootstrap. Форма разработана как шрифт awesome icon будет полем загрузки файла в дизайне.

Есть ли способ сделать это? Я понятия не имею об этом. Я выкладываю здесь код шаблона. Если кто-нибудь сможет мне помочь, я буду благодарен.

Спасибо.

  <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>

Предлагаю изменить HTML виджета FileInput или ClearableFileInput, чтобы выбрать свой собственный шрифт. HTML-код можно найти в каталоге django: django.forms.templates.widgets. Код сложный, но короткий, и добавление иконки в одно место ничего не нарушит.

Затем вам нужно создать новый пользовательский виджет и использовать его в определении класса вашей формы. Это намного проще и выглядит примерно так:

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

Для переопределения виджета для поля файла смотрите этот вопрос.

Вернуться на верх