2017-03-27 5 views
0

私はButtonを鮮明な形で苦労しています。代わりに、私は私が現在使用しているフォームは、私が欲しいものdjango crispy form submit buttonにアイコンを追加します

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

のようなものです

内のアイコンがしたいだけのデフォルトボタンの内側にアイコンが付いたボタンです。私はこれのための例を見つけませんでした。多分誰かが持っています。

種類は、あなたがあなたのボタンを提出し、このクラスでのボタンの背景画像を指定するCSSクラスを追加することができマイケル

答えて

1

をregads:私は一緒に暮らすことができる

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); 
} 
+0

感謝を:今、それは次のようになります!私はより多くのフォントのようなアイコンをボタンに追加することを考えていた Checkout mbieren

+0

あまり具体的ではない申し訳ありません – mbieren

+0

CSSにHTMLコンテンツを追加することはできませんので、content()プロパティ(例:.icon-button :前)。アイコンをコンテンツに追加する別のbutton.htmlテンプレートを使用する 'ShopSubmit()'サブクラスを作成して、 'Submit()'のサブクラス化を調べます。 [link](https://django-crispy-forms.readthedocs.io/en/latest/layouts.html#overriding-layout-objects-templates)を参照してください。 – dirkgroten

0

を通常のリンクをクリックしてJSにフォームを提出してください。

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

よろしく

マイケル

関連する問題