224

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

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

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から取得したもの：テキストと画像を含む送信ボタンを作成する方法は？）font-awesome？

4

7 に答える 7

378

入力の代わりにボタンtype="submit"を使用します

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

FontAwesome3.2.0の使用

<button type="submit" class="btn btn-success">
    <i class="icon-circle-arrow-right icon-large"></i> Next
</button>
于 2012-08-28T02:48:45.560 に答える
98

HTML

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

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

&#xf043;ここでは、FontAwesomeの「色合い」記号であるU+F043に対応するエンティティを使用しています。

CSS

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

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

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

ただし、このコントロールはピクセル単位で完全ではないため、自分で微調整する必要がある場合があります。

于 2012-07-28T17:39:49.520 に答える
59

fontawesomeutfチートシートを使用できます

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

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

于 2014-08-29T04:34:15.760 に答える
13

まあ、技術的には取得することはできず:before、:after疑似要素は要素に作用しinputます

W3Cから：

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

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

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

注：デモフィドルは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は、マウスイベントに要素を「通過」し、代わりにその要素の「下」にあるものをターゲットにするように指示します。

ハートのフォント/アイコンDemoにカーソルを合わせて、使用しない場合に何が起こるかを確認しますpointer-events: none;

于 2014-03-18T11:32:07.637 に答える
9

ボタンクラス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>
于 2016-02-04T12:14:45.553 に答える
4

このようにも可能

<button type="submit" class="icon-search icon-large"></button>
于 2013-09-15T02:03:07.030 に答える
2

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

<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」投稿変数でクリックされたボタンの値を取得できます

于 2017-10-26T02:33:08.833 に答える