Font-awesome、入力タイプ'submit'

Question

Font-awesomeの入力タイプ'submit'のクラスはないようです。ボタン入力にfont-awesomeのクラスを使用することは可能ですか？アプリケーションのすべてのボタン（実際にはtwitter-bootstrapのクラス'btn'とリンクしています）にアイコンを追加しましたが、'input type submit'にアイコンを追加することはで

または、このコードの使用方法:

input#image-button{
    background: #ccc url('icon.png') no-repeat top left;
    padding-left: 16px;
    height: 16px;
}

html:

<input type="submit" id="image-button">Text</input>

（私はから取った HTML:テキスト+画像を含む送信ボタンを作成する方法は？）とフォント-素晴らしいですか？

Answer 1

使用ボタンTYPE=入力

の代わりに「送信」

<button type="submit" class="btn btn-success">
    <i class="fa fa-arrow-circle-right fa-lg"></i> Next
</button>

.

フォントAwesome 3.2.0の場合

<button type="submit" class="btn btn-success">
    <i class="icon-circle-arrow-right icon-large"></i> Next
</button>

.

Answer 2

HTML

<input>要素は値属性の値のみを表示しているので、それだけを操作する必要があります。

<input type="submit" class="btn fa-input" value="&#xf043; Input">

.

ここでは、ここではU + F043に対応している、ここではフォント素晴らしい「tint」シンボルを使用しています。

CSS

フォントを使うためにスタイルをする必要があります：

.fa-input {
  font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.

これは私達にフォント素晴らしされているTINTシンボルと適切なフォントの他のテキストを与えます。

しかし、このコントロールはピクセル完璧なものではないので、あなた自身でそれを微調整する必要があるかもしれません。

Answer 3

フォントAwesome UTFチートシート

を使用できます。

<input type="submit" class="btn btn-success" value="&#xf011; Login"/>

.

これはチートシートのためのリンクです

Answer 4

まあ、技術的に:before疑似要素をGET GET GET GET GET GET GETAGCODE要素

w3c ：

12.1：前後：疑似要素

作成者は、生成されたコンテンツのスタイルと場所を指定します。 ：前後：疑似要素の後。彼らの名前が示すように、 ：前および：疑似要素の後にコンテンツの場所を指定した後 要素の文書ツリーの内容の前後に。コンテンツ' プロパティは、これらの疑似要素と組み合わせて、何があるかを指定します 挿入した。

---

だから私は:afterタグの形でボタンを送信したプロジェクトを持っていました。 inputに設定されているinputの内側のボタンは、<button>疑似値を使用してアイコンを絶対に配置します。

注：Demo FiddleはFontawesome 3.2.1のコンテンツコードを使用しています。 それに応じてspanプロパティの値を変更する必要があるかもしれません。

html

<span><input type="submit" value="Send" class="btn btn-default" /></span>

.

css

input[type="submit"] {
    margin: 10px;
    padding-right: 30px;
}

span {
    position: relative;
}

span:after {
    font-family: FontAwesome;
    content: "\f004"; /* Value may need to be changed in newer version of font awesome*/
    font-size: 13px;
    position: absolute;
    right: 20px;
    top: 1px;
    pointer-events: none;
}

.

デモ

ここではここではすべてを説明しています。そのコンテンツを通過させるために。

mozilla開発者ネットワーク：

要素がマウスのターゲットではないことを示すことに加えて イベント、価値なしはマウスイベントに「通過」に指示します。 代わりにその要素を「下」の場合は要素とターゲット。

ハートフォント/アイコン デモ position: relative;を使用しない場合はどうなるかを確認してください

Answer 5

ボタンクラスを使用できます btn-link と btn-xs タイプを使って submit, 、その中にアイコンが付いた小さな目に見えないボタンが作成されます。例を示します。:

<button class="btn btn-link btn-xs" type="submit" name="action" value="delete">
    <i class="fa fa-times text-danger"></i>
</button>

Answer 6

このような

のように可能な

<button type="submit" class="icon-search icon-large"></button>

.

Answer 7

複数の送信を使用すると、選択した送信の値が必要な場合は、これを非常に簡単に実行できます。フォームに隠されたフィールドを作成し、どのボタンをクリックしたかに応じてその値を変更してください。たとえば、フォームでは、次のようにします。

<input type="hidden" id="Clicked" name="Clicked" value="" />
<button type="submit" class="btn btn-success ClickCheck" id="Create"> <i class="fa fa-file-pdf-o"> Create Bill</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="Reset"> <i class="fa fa-times"> Reset</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="StoreData"> <i class="fa fa-archive"> Save</i></button>

.

jQueryの使用：

<script type="text/javascript">
    $(document).ready(function()
    {
        $('.ClickCheck').click(function()
        {
            var ButtonID = $(this).attr('id');
            $('#Clicked').val(ButtonID);
        });
    });
</script>

.

その後、「クリック」ポスト変数

をクリックしたボタンの値を取得できます。