將圖標添加到Django脆皮表單提交按鈕

我正在用鬆脆的形式掙扎按鈕。而不只是默認按鈕的我想有內部將圖標添加到Django脆皮表單提交按鈕

圖標我目前使用的形式是像

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'}), 
    }

我要的是裏面的圖標的按鈕。我沒有找到一個這樣的例子。也許有人有一個。

類regads

邁克爾

來源

2017-03-27 mbieren

您可以爲按鈕添加一個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); 
}

來源

2017-03-27 09:41:10 dirkgroten

謝謝！我更想考慮在按鈕上添加一個fontawesome圖標，如 Checkout – mbieren

對不起，我沒有那麼具體 – mbieren

這並不容易，因爲你不能通過content（）屬性將HTML內容添加到CSS中（例如使用.icon-button ：之前）。我會通過創建一個'ShopSubmit（）'子類來查看子類化'Submit（）'，該子類使用一個不同的button.html模板將圖標添加到內容中。請參閱[鏈接]（https://django-crispy-forms.readthedocs.io/en/latest/layouts.html#overriding-layout-objects-templates） – dirkgroten

我可以與生活普通鏈接並用JS提交表單。現在，它看起來像：

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

問候

邁克爾

來源

2017-03-30 08:55:28 mbieren

將圖標添加到Django脆皮表單提交按鈕

回答

相關問題