web-dev-qa-db-ja.com

素晴らしいフォント、入力タイプ 'submit'

Font-awesomeには入力タイプ 'submit'のクラスはないようです。ボタン入力にfont-awesomeのクラスを使用することは可能ですか？私は自分のアプリケーションのすべてのボタン（実際にはTwitterブートストラップのクラス '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から取った：それはその中にテキスト+画像を持つ送信ボタンを作るには？ ）？

twitter-bootstraptwitter-bootstrap-railsfont-awesome
185
denis.peplin

入力の代わりにbutton type = "submit"を使用

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

font Awesome 3.2.0用

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

HTML

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

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

ここでは&#xf043;エンティティを使用しています。これはFont Awesomeの 'tint'シンボルであるU + F043に対応します。

CSS

それから、フォントを使用するようにスタイルを設定する必要があります。

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

これにより、Font Awesomeの色合いのシンボルと、適切なフォントの他のテキストが表示されます。

しかし、このコントロールはピクセルパーフェクトではないので、あなたは自分でそれを微調整しなければならないかもしれません。

80
Pavlo

あなたはフォント素晴らしいutf cheatsheetを使うことができます

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

こちらがチートシートへのリンクです http://fortawesome.github.io/Font-Awesome/cheatsheet/

51
Bernard Nongpoh

技術的には、:beforeおよび:after擬似要素をinput要素で機能させることはできません。

W3C から：

12.1：beforeおよび：after擬似要素

作成者は、生成されるコンテンツのスタイルと場所を：beforeおよび：after擬似要素で指定します。名前が示すように、：beforeおよび：after擬似要素は、要素のドキュメントツリーコンテンツの前後のコンテンツの場所を指定します。 'content'プロパティは、これらの擬似要素と組み合わせて、挿入されるものを指定します。

だから、inputタグの形式でボタンを送信するプロジェクトがあり、何らかの理由で他の開発者が通常の入力送信ボタンの代わりに<button>タグの使用を制限していたので、別の解決策を思いつきました。 position: relative;に設定されたspan内にボタンをラップし、:after pseudoを使用してアイコンを絶対に配置します。

注：デモフィドルはFontAwesome 3.2.1のコンテンツコードを使用するため、contentプロパティの値を適宜変更する必要がある場合があります。

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;
}

Demo

pointer-events: none;という1つのプロパティについては、ここですべてが自明です。:after疑似生成コンテンツの上にマウスを移動すると、ボタンがクリックしないため、noneの値を使用します。クリックアクションがそのコンテンツを通過するように強制します。

Mozilla Developer Network から：

要素がマウスイベントのターゲットではないことを示すことに加えて、値noneは、マウスイベントに要素を「通過」させ、代わりにその要素の「下」にあるものをターゲットにするよう指示します。

ハートのフォント/アイコンをホバー デモ pointer-events: none;を使用しないとどうなるかを確認してください

12
Mr. Alien

ボタンクラス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>
9
Derp

こんな感じでも可能

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

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

<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>

その後、 "Clicked"ポスト変数でクリックされたボタンの値を取得できます。

1
RationalRabbit