素晴らしいフォント、入力タイプ「送信」


205

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を使用しますか?

回答:


345

入力の代わりにボタン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>

驚くばかり!期待どおりに動作します。これをsimple_formに適応させるか、ヘルパーを作成するためのいくつかの手順が必要ですが、比較的簡単です。
denis.peplin 2012

19
また、間の違いを意識する<button type=submit><input type=submit>stackoverflow.com/questions/3543615/...
パブロ

@ stanislav-mayorov動作します。現在のバージョン4.7を使用している場合は、3.2.0(2012以降)から調整する必要があります。更新された答えを試してください。
ジョアンレメ2017

@JoaoLemeは<button type="submit">どのような形でも機能しますか?
リュウジョ

ページの再読み込みを回避したい場合、これは機能しません。
Salvioner

87

HTML

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

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

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

CSS

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

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

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

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


1
答えてくれてありがとう、それは機能しますが、フォントが値のテキスト全体に影響するため、実際にはこのアプローチを使用できません。私も使用しています「アイコン-大」これをしようとする人のために他のボタン...では、フォントのコードはここにある:github.com/FortAwesome/Font-Awesome/blob/master/sass/...
denis.peplin

ここでできることはそれだけです。個人的には<input>、sw / oアイコンを残すことをお勧めします。
パブロ

罰金を働いていた私は、2つの一つの形で提出してきたので、私は<「送信」=入力タイプ>を使用する必要がある
ムニール

「fa」は要素の高さを変更するため、これは「fa」を要素のクラスに追加するよりも優れています。
Siwei Shen申思维

また、インラインスタイルfont-familyプロパティを使用して、テキストコンテンツを持つ任意のHTML要素で使用することもできます。
SaidbakR 2018年

54

あなたはフォント素晴らしいUTFチートシートを使うことができます

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

ここにチートシートのリンクがあります http://fortawesome.github.io/Font-Awesome/cheatsheet/


2
これは私の日を作りました!ありがとうございます。他のユーザーの場合は、文に注意してください:アイコン(ユニコードではなく)をこのページから直接デザインにコピーアンドペーストします。つまり、実際のアイコンをコピーすると機能します
PSR

17
<input type="button" class="fa" value="&#xf011; Login"/>ブートストラップなしでfaクラスを使用して機能させる
StackHola

2
あなたはjavascriptやjQueryを使ってこれを設定しようとしている場合は、Unicodeのバリエーションを使用:$("input.search").addClass("fa").val("\uf011 Login");
ジェイミー・チョン

2
Bootstrapを使用しても、これを機能させるにはclass = "fa"を追加する必要があります。
denis.peplin

12

まあ、技術的には、取得することはできません: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

さて、ここではすべてが1つのプロパティについて自明です。つまりpointer-events: none;:after疑似的に生成されたコンテンツにカーソルを合わせるとボタンがクリックされないため、の値を使用noneすると、クリックアクションがそのコンテンツを通過するように強制されます。 。

Mozilla Developer Networkから:

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

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


1
非常に優れたソリューションですが、1つの大きな欠点があります。pointer -events:IE <11ではサポートされない(caniuse.com/#feat=pointer-events)。その理由は、pointer-eventsプロパティがSVG要素(ベクターグラフィックス)のために作成されたものであり、技術的には他のHTML要素のW3C仕様(まだ、wiki.csswg.org / spec / css4-ui#pointer-events)にはありませんIE <11を除くすべての最新のブラウザーがサポートしています。
CaspianRoach 2014年

9

ボタンクラスbtn-linkbtn-xstypeを使用できますsubmit。これにより、中にアイコンのある小さな非表示のボタンが作成されます。例:

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

5

このようにも可能

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

1

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

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.