如何为使用widget_tweaks的{{form.date.label_tag}}添加Font Awesome图标

我来帮你解决这个问题！在Django里给表单字段的label添加Font Awesome图标，其实有几种靠谱的方法，我给你一一说明：

1. 手动渲染Label和图标（最直观，纯模板层解决） #

直接在模板里自己写完整的<label>标签，把原有label文本和图标组合在一起，这样完全可控，而且点击图标也能聚焦到对应的输入框，体验更好：

<div class="form-group">
  <label for="{{ form.date.id_for_label }}">
    {{ form.date.label }} <i class="fa fa-calendar"></i>
  </label>
  <!-- 如果需要用widget_tweaks给字段加样式，继续用它就行 -->
  {{ form.date|add_class:"form-control" }}
</div>

2. 在表单类里自定义带HTML的Label（适合多页面复用） #

如果这个表单会在多个页面使用，不想重复写模板代码，可以在forms.py里直接把label设置成带图标的HTML，记得用mark_safe告诉Django不要转义这段HTML：

from django import forms
from django.utils.safestring import mark_safe

class YourForm(forms.Form):
    # 要是ModelForm写法也一样
    date = forms.DateField(
        label=mark_safe('Date added: <i class="fa fa-calendar"></i>')
    )

之后在模板里直接用{{ form.date.label_tag }}，就会自动渲染出带图标的label了。

3. 结合widget_tweaks的写法（如果你坚持要用它） #

widget_tweaks主要是用来修改表单字段的widget属性，对label的支持有限，但你可以用它的{% render_field %}配合手动写label：

{% load widget_tweaks %}
<div class="form-group">
  {% with label_text=form.date.label %}
    <label for="{{ form.date.id_for_label }}">
      {{ label_text }} <i class="fa fa-calendar"></i>
    </label>
  {% endwith %}
  {% render_field form.date class="form-control" %}
</div>

为什么你之前的方法没成功？ #

你尝试的<h2><span>Add<i class="fa fa-plus"></i></span></h2>这种写法，是在外部元素里加图标，但{{ form.date.label_tag }}会生成完整的<label>标签——如果你只是把它放在span里加图标，图标会在label标签外面，没有嵌入到label内部，所以看不到预期的效果。

内容的提问来源于stack exchange，提问作者Reez0