将图标添加到 django 脆皮表单提交按钮答案

【问题标题】：add an icon to django crispy form submit button将图标添加到 django 脆皮表单提交按钮
【发布时间】：2023-04-03 16:04:01
【问题描述】：

我在酥脆的表格上与按钮作斗争。我想在里面放一个图标，而不仅仅是默认按钮

我目前使用的表格是这样的

class MyForm(forms.ModelForm):

helper = FormHelper()
helper.layout = Layout(
    Div(
        Div(PrependedText('source_text', '<span class="fa fa-user"></span>'), css_class='col-md-6'),
        Div(PrependedText('destination_text','<span class="fa fa-flag-checkered"></span>'), css_class='col-md-6'),
        css_class='row-fluid'),
    Div(
        Div(PrependedText('departure', '<span class="fa fa-clock-o"></span>'), css_class='col-md-3'),
        Div('departure_delta', css_class='col-md-2'),
        Div(Submit('submit', "Neue Fahrt starten", css_class="btn"), css_class="col-md2"),
        css_class='row-fluid'),
)
helper.form_show_labels = False
helper.form_id = 'id_travelshare'

class Meta:

    model = MyModel
    fields = ['source', 'source_text', 'destination',
              'destination_text', 'departure', 'departure_delta']

    widgets = {
        'source': forms.HiddenInput(),
        'destination': forms.HiddenInput(),
        'departure' : forms.DateTimeInput(attrs={'class':'datetimepicker'}),
    }

我想要的是一个带有图标的按钮。我没有找到一个例子。也许有人有。

好心人

迈克尔

【问题讨论】：

标签： python django twitter-bootstrap-3 django-crispy-forms

【解决方案1】：

要做到这一点，很难使用内置的提交布局项。相反，最好只使用这样的通用 layout.HTML 项目：

    self.helper.layout.append(
        layout.HTML('<button type="submit" class="btn btn-primary">'
                    '<span class="fas fa-plus"></span> Apply to change order'
                    '</button>'))

【讨论】：

这正是我想要的。我一直在尝试为我提交的酥脆表单获取一个提交按钮，并包含一个引导图标。谢谢！

【解决方案2】：

这对我来说非常有效：

PrependedText('price', '<span class="fas fa-lira-sign"></span>')

与上述解决方案相比，这似乎是最简单的方法，也值得:-)

【讨论】：

【解决方案3】：

您可以将 CSS 类添加到提交按钮，然后为具有此类的按钮指定背景图像：

Submit('submit', "Neue Fahrt starten", css_class="btn icon-button")

# in your .css file:
.btn.icon-button {
    background-image: url(../../icons/button-arrow-right.png);
}

【讨论】：

谢谢！我更想在按钮上添加一个字体很棒的图标，例如 Checkout
抱歉没有那么具体
这并不容易，因为您不能通过 content() 属性将 HTML 内容添加到 CSS 中（例如，使用 .icon-button:before）。我会通过创建一个ShopSubmit() 子类来研究子类化Submit()，该子类使用不同的button.html 模板，将图标添加到内容中。见link

【解决方案4】：

我可以忍受一个普通的链接并使用 JS 提交表单。现在看起来像：

<a href="#" class="btn btn-primary">
        <i class="fa fa-plus" aria-hidden="true"></i>
        Hinzufuegen
</a>

问候

迈克尔

【讨论】：

【解决方案5】：

您可以使用 StrictButton 创建按钮元素而不是输入并将类型设置为“提交”。然后你可以在按钮里面放任何你想要的html。

StrictButton('Neue Fahrt starten <i class="fa fa-pencil"></i>', type="submit", css_class="btn")

【讨论】：