[英]add an icon to django crispy form submit button
I am struggling with the Button on a crispy form.我正在为脆脆的 Button 苦苦挣扎。 Instead of just the default button I would like to have an icon inside我想在里面有一个图标,而不仅仅是默认按钮
The form I am currently using is like我目前使用的表格就像
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'}),
}
What I want is a button with an icon inside.我想要的是一个里面有一个图标的按钮。 I did not find an example for this.我没有找到一个例子。 Maybe somebody has one.也许有人有一个。
Kind regads亲切的问候
Michael迈克尔
To do this it's hard to use the built-in Submit layout item.为此,很难使用内置的 Submit 布局项。 Instead, it's best to just use a general layout.HTML item like this:相反,最好只使用这样的常规 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>'))
You can add a CSS class to your submit button and then specify a background-image for buttons with this class:您可以向提交按钮添加 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);
}
This worked perfectly for me:这对我来说非常有效:
PrependedText('price', '<span class="fas fa-lira-sign"></span>')
This seemed like the easiest method compared the above solutions which were also worthy :-)与上述同样值得的解决方案相比,这似乎是最简单的方法:-)
I can live with an ordinary link and submit the form with JS.我可以使用普通链接并使用JS提交表单。 Now it looks like :现在它看起来像:
<a href="#" class="btn btn-primary">
<i class="fa fa-plus" aria-hidden="true"></i>
Hinzufuegen
</a>
Regards问候
Michael迈克尔
You can use StrictButton to create a button element instead of an input and set type to 'submit'.您可以使用 StrictButton 创建按钮元素而不是输入并将类型设置为“提交”。 Then you can put any html you want inside the button.然后你可以把任何你想要的 html 放在按钮里面。
StrictButton('Neue Fahrt starten <i class="fa fa-pencil"></i>', type="submit", css_class="btn")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.