Question

所以我想在django渲染的输入框中添加font-awesome的图标，但是没有办法这样做。输入框由django via

提供

{{form.username}}

字段类型，输出类似于

<input type="text" name="username" id="id_username" required placeholder="Username" maxlength="32" />

我通过诸如

之类的django小部件实现了占位符

username = forms.CharField(
        required = True,
        label = 'Username',
        max_length = 32,
        widget=forms.TextInput(
            attrs={'placeholder':'Username'},
            ),
        )

我想知道如何将图标放在那里，就像图像shown一样谁的代码显示在这里

<input placeholder="First Name" name="Name" class="name" type="text" required="">
<span class="icon1"><i class="fa fa-user" aria-hidden="true"></i></span>

提前致谢。

Answer 1

在你的模板中执行此操作

{% for field in form %}
    <div class="form-group {% if field.errors %}has-error{% endif %}" id="group_{{ field.name }}">
        <label for="id_{{ field.name }}" class="control-label">{{ field.label }}</label>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1"><i class="fas fa-user"></i></span>
            </div>
            {{ field }}
        </div>
    </div>
{% endfor %}

这可以帮助您解决问题！

Answer 2

如果您使用的是材料图标，则需要先安装

pip install django-material

            {% load crispy_forms_tags %}
            <form action="{% url 'home' %}" method='post'>
                <h3 class='center orange-text'>Log In Form</h3>
                {%csrf_token%}
                {% form %}
                {% part form.user_name prefix %}<i class='material-icons prefix orange lighten-4'>account_box</i>{% endpart%}
                {% part form.password prefix %}<i class='material-icons prefix or lighten-4'>lock_open</i>{% endpart %}
                {% endform%}
                <button required type="button" name="button" class='btn-large orange black-text right'  >Log In</button>
            </form>

在基本html或当前正在使用的html中包括以下内容

{% include 'material/includes/material_css.html' %}
{% include 'material/includes/material_js.html' %}

Answer 3

自定义ModelForm类将表单控件类添加到所有字段并查找已定义的图标

class BootstrapModelForm(ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        icons = getattr(self.Meta, 'icons', dict())

        for field_name, field in self.fields.items():
            # add form-control class to all fields
            field.widget.attrs['class'] = 'form-control'
            # set icon attr on field object
            if field_name in icons:
                field.icon = icons[field_name]

然后在您的Meta类中添加图标字典这与您定义labels或widgets

的作用相同

class UserForm(BootstrapModelForm):
    class Meta:
        model = User
        fields = ['username',]
        icons = {'username': 'user-circle'}

现在在html模板中，在字段上使用图标attr 此示例假定字体真棒的图标库

</form>
  {% for form_field in form %}
    <div class="input-group">
      <span>

        <i class="fas fa-{{ form_field.field.icon }}"></i>

      </span>
      {{ form_field }}
    </div>
  {% endfor %}
</form>

使用CSS将图标放在输入上方（如果您确实有需要）

span{
  position: absolute;
  margin-left: 5px;
  height: 25px;
  display: flex;
  align-items: center;
}
input{
  padding-left: 25px;
  height: 20px;
}

Answer 4

一种方法可能是这样，尽管根据您的需要，可能需要做更多工作才能将图标定位在屏幕上。

模板.html

<div class="col">
  {{form.your_field_here.label_tag}} 
  <i title="{{ form.your_field_here.help_text }}" class="fas fa-question">
    {{ form.your_field_here }}
  </i>
</div>

视图.py

your_field_here = forms.CharField(
    label='Your field label here',
    widget=forms.TextInput(attrs={
        'class': 'form-control'}),
    help_text='Your help text to appear in the tooltip')

如何在Django表单中添加图标

4 个答案: