テキスト入力要素内の素晴らしいフォントアイコン


136

ユーザー名入力フィールドにユーザーアイコンを挿入しようとしています。

Font Awesomeフォントなので 、プロパティが機能しないことを知っている同様の質問からの解決策の1つを試しました。background-image

以下は私のアプローチであり、アイコンが表示されません。

.wrapper input[type="text"] {
    position: relative;
}

.wrapper input[type="text"]:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 0px;
    left: -5px;
    content: "\f007";
}

デフォルトのフォントawesome cssでフォントフェースを宣言しているため、上記のfont-familyを追加するのが適切な方法であるかどうかは不明でした。

 @font-face {
     font-family: 'FontAwesome';
     src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
     src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
 }

何が知りたいですか?質問/エラーとは何ですか?
allcaps 2013年

@allcaps Oops ..元の投稿を見ただけでは、発生しているエラーを特定する方法がないことを認めます。少し編集しました。
Seong Lee

私の更新された答えを見てください。
allcaps 2013年

回答:


107

あなたが正しい。:beforeおよび:after擬似コンテンツはimg、およびinput要素のような置換されたコンテンツで機能することを意図していません。wrapping要素を追加してfont-familyを宣言することは、背景画像を使用する場合と同様に、可能性の1つです。あるいは、html5プレースホルダーテキストがあなたのニーズに合うかもしれません:

<input name="username" placeholder="&#61447;">

プレースホルダー属性をサポートしないブラウザーは、それを単に無視します。

更新

beforeコンテンツセレクタは入力を選択します:input[type="text"]:before。ラッパーを選択する必要があります:.wrapper:beforehttp://jsfiddle.net/allcaps/gA4rx/を参照してください。また、ラッパーが冗長であるプレースホルダーの提案を追加しました。

.wrapper input[type="text"] {
    position: relative; 
}

input { font-family: 'FontAwesome'; } /* This is for the placeholder */

.wrapper:before {
    font-family: 'FontAwesome';
    color:red;
    position: relative;
    left: -5px;
    content: "\f007";
}

<p class="wrapper"><input placeholder="&#61447; Username"></p>

後退する

Font Awesomeは、Unicode Private Use Area(PUA)を使用してアイコンを格納します。他の文字は存在せず、ブラウザのデフォルトに戻ります。それは他の入力と同じでなければなりません。入力要素にフォントを定義する場合は、アイコンを使用する場合のフォールバックと同じフォントを指定します。このような:

input { font-family: 'FontAwesome', YourFont; }

4
プレースホルダーメソッドを使用すると機能します。問題は、通常の(アイコンではない)テキストがページの他の部分のfont-faceと一致せず、ブラウザーのデフォルトのセリフとして表示されることです。これを回避する方法はありますか?
ハリーグ

6
Font Awesomeは、Unicode Private Use Area(PUA)を使用してアイコンを格納します。他の文字は存在せず、ブラウザのデフォルトに戻ります。それは他の入力と同じでなければなりません。入力要素のどこかにフォントを定義する場合は、アイコンを使用する場合のフォールバックと同じフォントを指定しますinput { font-family: 'FontAwesome' YourFont; }。これは役に立ちますか?いつでも新しい質問をすることができます。
allcaps 2014年

1
@allcapsは、プレースホルダー作品にフォールバックフォントファミリーを使用することを推奨しています。フォールバックでフォントを変更しようとは思わなかった。将来のユーザーのためにフォールバックフォントを含めるように回答を更新できますか?ありがとう!
ProfileTwist 2015年

コードのリストはどこにありますか?&#61447;のfaユーザーを意味します
Elyor

@Elyor:htmlエンティティを使用する必要はありません。プロジェクトがUTF-8の場合、フォントの素晴らしいグリフをコピーして貼り付けることができます。コードエディタではおそらくブロックとして表示されますが、それで問題ありません。多くのオンラインunicode-to-html-entities-convertorsの1つを使用することもできます。
allcaps

123

出力:

ここに画像の説明を入力してください

HTML:

<input name="txtName" id="txtName">

<span class="fa fa-info-circle errspan"></span>

CSS:

<style type="text/css">
    .errspan {
        float: right;
        margin-right: 6px;
        margin-top: -20px;
        position: relative;
        z-index: 2;
        color: red;
    }
</style>

(または)

出力:

ここに画像の説明を入力してください

HTML:

<div class="input-wrapper">
     <input type="text" />
 </div>

CSS:

<style type="text/css">
    .input-wrapper {
        display:inline-block;
        position: relative
    }
    .input-wrapper:after {
        font-family: 'FontAwesome';
        content: '\f274';
        position: absolute;
        right: 6px;
    }
</style>

2
これは、テキストボックスでfont-awesomeを使用する際の優れたヒントでした。
Sunil、2015

そのアイコンをクリック可能にすることは可能ですか?
FrenkyB 2016

5
@FrenkyB、はい。<span class = "fa fa-info-circle errspan" onclick = 'YOUR_FUNCTION()'> </ span>
パラニクマー

2
設定z-index: 1を行うと、アイコンをクリックしたときに、基になる入力にフォーカスが置かれます。たとえば、日付ピッカーを追加するときに必要なものがあります。
romaricdrigon 2016

私には問題なく動作しますが、使用しませんでしたposition: relative(負のマージンは必要ありません)またはz-index(要素が入力後にレンダリングされるとすぐに)
Pierre de LESPINAY

24

ラッパーを使用できます。ラッパー内にfont awesome要素i と要素を追加しinputます。

<div class="wrapper">
    <i class="fa fa-icon"></i>
    <input type="button">
</div>

次に、ラッパーの位置を相対に設定します。

.wrapper { position: relative; }

次に、i要素の位置を絶対位置に設定し、正しい場所を設定します。

i.fa-icon { position: absolute; top: 10px; left: 50px; }

(それはハックです、しかし私は知っています、しかしそれは仕事を成し遂げます。)


2
なぜそこに.wrapperが必要なのですか?
Ashfaque Rifaye

私が理解しているように、絶対要素は最も近い「配置された」祖先に対して相対的に配置されます。位置:相対は、ラッパーが「位置」にあることを意味します(絶対、固定、またはスティッキーである可能性もあります)。これを行わない場合、アイコンは、dom内でより高い他の要素に対して絶対的に配置されます(または、ビューポートに対して配置された要素が見つからない場合)。
Jaqen H'ghar

20

この回答は、次の条件を満たす必要がある場合に役立ちます(現在の回答はいずれもこれらの条件を満たすものではありません)。

  1. アイコンはテキストボックス内にあります
  2. 入力にテキストを入力してもアイコンは消えないはずで、入力したテキストはアイコンの右側に移動します
  3. アイコンをクリックすると、基になる入力がフォーカスされます

3は、これらの条件を満たすHTML要素の最小数だと思います。

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>


4
入力フィールド内にアイコンを配置するための最良の回答。ユーザーが入力している間、アイコンは表示されたままです。
ObjectiveTC

上:calc(50%-0.5em)は、ラベルの高さが1emであると仮定します
drichar

1
@drichar-私はテストしたばかりですが、これはまだどのラベルの高さでも機能します。ラベル内のラベルテキストを垂直方向に揃えない限り(これはデフォルトではありません)デフォルトでは上に揃えられるため、背の高いラベルでも正しく機能します。また、ラベルと入力のフォントサイズを変えてテストしました。すべてのシナリオで機能するようです。
2018年

@ SkeetsO'Reilly私は修正されました。emとremを混同しています。0.5emはフォントサイズの半分です。素晴らしい解決策、それをプロジェクトで使用しています(フォントサイズのないFAではなくカスタムSVGを使用しているため、配置の問題が発生し、コメントが間違っていました)
drichar

14

たくさんコーディングする必要はありません...次のステップに従ってください:

<input id="input_search" type="text" class="fa" placeholder="&#xf002 Search">

あなたはここにUnicode(fontawesome)へのリンクを見つけることができます...

アイコン用のFontAwesome Unicode


プレースホルダーに別のフォントファミリーを既に使用している場合はどうなりますか?その後、それは動作しません。「&#xf002検索」のテキスト「検索」にカスタムフォントを使用させる方法はありますか?Unicodeはまだfontawesomeフォントを使用していますか?
Sushmit Sagar

6

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>


こんにちは、あなたに解決策について少し説明を添付してください。
Aditya Thakur

1
この回答は、次の条件を満たす必要がある場合に役立ちます(現在の回答はどれも、これらの条件を満たしていません)。アイコンはテキストボックス内にあります。入力にテキストを入力しても、アイコンは消えません。アイコンの右側アイコンをクリックすると、基になる入力に焦点が当てられるはずです。3は条件を満たすHTML要素の最小数だと
思い

5

この質問のさまざまなバージョンを読んだり、周りを検索したりして、非常にクリーンでjsフリーのソリューションを思いつきました。これは@allcapsソリューションに似ていますが、入力フォントがメインドキュメントフォントから変更される問題を回避します。

::input-placeholder属性を使用して、プレースホルダーテキストのスタイルを明確に設定します。これにより、アイコンフォントをプレースホルダーフォントとして、本体(または他のフォント)を実際の入力テキストとして使用できます。現在、ベンダー固有のセレクターを指定する必要があります。

これは、入力要素でアイコンとテキストの組み合わせを必要としない限りうまく機能します。もしそうなら、あなたは単語のデフォルトのブラウザフォント(私のものではプレーンセリフ)であるプレースホルダーテキストに我慢する必要があります。

例:
HTML

<p class="wrapper">
    <input class="icon" type="text" placeholder="&#61442;" />
</p>

CSS

.wrapper {
    font-family:'arial', sans-serif;
}
input.icon::-webkit-input-placeholder {
    font-family:'FontAwesome';
}

ブラウザーの接頭辞付きセレクターのフィドル:http : //jsfiddle.net/gA4rx/78/

各ブラウザー固有のセレクターを別個のルールとして定義する必要があることに注意してください。それらを組み合わせると、ブラウザはそれを無視します。


これは洗練されたソリューションですが、期待される動作を実現しません。
Olivier Refalo 2014年

実際、font-family現時点では、このセレクターを受け入れるのはWebkitブラウザーだけです。私たちは、将来、もっと広く受け入れられることを望みます。
ハリーグ2014年

5

私はブートストラップ4を使用する最も簡単な方法を見つけました。

<div class="input-group mb-3">
    <div class="input-group-prepend">
    <span class="input-group-text"><i class="fa fa-user"></i></span></div>
    <input type="text"/>
</div>

2

私はそのようにこれを達成しました

  form i {
    left: -25px;
    top: 23px;
    border: none;
    position: relative;
    padding: 0;
    margin: 0;
    float: left;
    color: #29a038;
  }
<form>

  <i class="fa fa-link"></i>

  <div class="form-group string optional profile_website">
    <input class="string optional form-control" placeholder="http://your-website.com" type="text" name="profile[website]" id="profile_website">
  </div>

  <i class="fa fa-facebook"></i>
  <div class="form-group url optional profile_facebook_url">
    <input class="string url optional form-control" placeholder="http://facebook.com/your-account" type="url" name="profile[facebook_url]" id="profile_facebook_url">
  </div>

  <i class="fa fa-twitter"></i>
  <div class="form-group url optional profile_twitter_url">
    <input class="string url optional form-control" placeholder="http://twitter.com/your-account" type="url" name="profile[twitter_url]" id="profile_twitter_url">
  </div>

  <i class="fa fa-instagram"></i>
  <div class="form-group url optional profile_instagram_url">
    <input class="string url optional form-control" placeholder="http://instagram.com/your-account" type="url" name="profile[instagram_url]" id="profile_instagram_url">
  </div>

  <input type="submit" name="commit" value="Add profile">
</form>

結果は次のようになります。

結果

サイドノート

Ruby on Railsを使用しているため、結果のコードが少し膨らんでいるように見えることに注意してください。slimのビューコードは実際には非常に簡潔です:

i.fa.fa-link
= f.input :website, label: false

i.fa.fa-facebook
= f.input :facebook_url, label: false

i.fa.fa-twitter
= f.input :twitter_url, label: false

i.fa.fa-instagram
= f.input :instagram_url, label: false

2

私にとって、フォントの素晴らしいユニコードなどで疑似要素を使用する必要なしにテキスト入力の「内」にアイコンを配置する簡単な方法は、相対配置するラッパー要素内にテキスト入力とアイコンを配置することです。そして、検索入力とフォントの素晴らしいアイコンの両方を絶対配置します。

背景の画像とテキストで行うのと同じ方法で、ここで行います。これは初心者にとっても良いことだと思います。CSSポジショニングは、コーディングの最初の段階で初心者が学習する必要があるため、コードの理解と再利用が簡単です。

    <div class="searchbar-wrapper">
      <i class="fa fa-search searchbar-i" aria-hidden="true"></i>
      <input class="searchbar-input" type="search" placeholder="Search...">
    </div>

    .searchbar-wrapper{
      position:relative;
    }

    .searchbar-i{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 0 .5rem;
    }

    .searchbar-input{
      padding-left: 2rem;
    }

1

オールキャップスの提案に基づいています。HTMLが最も少ないfont-awesome背景メソッドは次のとおりです。

<div class="wrapper"><input></div>

.wrapper {
    position: relative; 
}

input { padding-left: 20px; }

.wrapper:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 2px;
    left: 3px;
    content: "\f007";
}

1

クリック可能なアイコンを作成して、テキスト入力要素内にフォーカスします。

CSS

.myClass {
    font-size:20px;
    position:absolute; top:10px; left:10px;
}

HTML

<div>
    <label style="position:relative;">
         <i class="myClass fa fa-address-book-o"></i>
         <input class="w3-input" type="text" style="padding-left:40px;">
    </label>
</div>

<i>Font Awesomeライブラリから好きなアイコンをタグ内に追加するだけで、結果を楽しむことができます。


0
<HTML>
<head>
<style>
.inp1{
color:#2E64FE;
width:350px;
height:35px;
border:solid;
font-size:20px;
text-align:left;
}
</style>
</head>

<body>

<div class="inp1">          
<a href="#" class=""><i class="fa fa-search"></i></a>
</div>

2
このコードブロックが何を行っているかについての説明も投稿すると、OPにとってより役立ちます。
キム

0

純粋にCSS

input[type=search] {
    min-width: 320px;
    height: 24px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    margin-top: 6px;
    background-image: url('/img/search.png');
    background-size: 16px;
    background-position: 280px;
    background-repeat: no-repeat;
}

1
答えを教えてください。
E. Zeytinci

0

私の解決策input、アイコンを保持するためのの周りに相対コンテナを用意することでした。その外側のコンテナーには、コンテナー内::afterに配置さabsoluteれた、目的のアイコンが付いたがあります。

HTML:

<div class="button__outer">
    <input type="submit" class="button" value="Send"/>
</div>

SASSコード:

.button {
 display: inline-block;
 width: auto;
 height: 60px;
 line-height: 60px;
}

.button__outer {
    position: relative;
    display: inline-block;
    width: auto;

    &::after {
       position: absolute;
       right: 0;
       top: 0;
       height: 60px;
       line-height: 60px;
       width: 60px;
       font-family: 'FontAwesome', sans-serif;
       content: "\f054";
       color: #fff;
       font-size: 27px;
       font-weight: 700;
    }
}

0

私の解決策は、input要素内にfont-awesomeアイコンを追加することです。以下は、入力要素内にアイコンを追加する簡単なコードです。以下のコードをコピーして、追加する場所に配置してください。または、アイコンを変更する場合は、アイコンコードを<i> タグに挿入します。

<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.soft-codeon {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 50%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background: linear-gradient(to right, #ec008c, #fc6767); 
  color: white;
  min-width: 20px;
  text-align: center;
}
.soft-field {
  width: 100%;
  padding: 10px;
  outline: none;
  border:2px solid #fc6767;
}
.soft-field:focus {
  border: 2px solid #ec008c;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="soft-codeon">
    <i class="fa fa-user icon"></i>
    <input class="soft-field" type="text" placeholder="Username" name="usrnm">
  </div>
  <div class="soft-codeon">
    <i class="fa fa-envelope icon"></i>
    <input class="soft-field" type="text" placeholder="Email" name="email">
  </div>


2
答えは役に立ちますが、スパムである文は許可されません。あなたがそのようなものを持ちたいなら、あなたのプロフィールにリンクを置くことができます。
マキエン

このコードスニペットは問題を解決する可能性がありますが、説明を含めると、投稿の品質を向上させるのに役立ちます。あなたは将来の読者のための質問に答えていることを覚えておいてください、そしてそれらの人々はあなたのコード提案の理由を知らないかもしれません。
クライスターズ

0

Font Awesomeバージョンが原因でアイコンが表示されない場合があります。バージョン5の場合、CSSは

.dropdown-wrapper::after {
     content: "\f078";
     font-family: 'Font Awesome 5 Free';
     font-weight: 900;
     color: #000;
     position: absolute;
     right: 6px;
     top: 10px;
     z-index: 1;
     width: 10%;
     height: 100%;
     pointer-events: none;
}

0

簡単な方法ですが、ブートストラップが必要です

 <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-envelope"></i></span> <!-- icon envelope "class="fa fa-envelope""-->
    </div>
    <input type="email" id="senha_nova" placeholder="Email">
  </div><!-- input-group -->

ここに画像の説明を入力してください


-1
::-webkit-search-cancel-button {
        height: 10px;
        width: 10px;
        display: inline-block;
        /*background-color: #0e1d3033;*/
        content: "&#f00d;";
        font-family: FontAwesome;
        font-weight: 900;
        -webkit-appearance: searchfield-cancel-button !important;
    }
    input#searchInput {
        -webkit-appearance: searchfield !important;
    }

<input data-type="search" type="search" id="searchInput" class="form-control">

-3

私は以下のものを試しました、そしてそれは本当にうまくいきますHTML

input.hai {
    width: 450px;
    padding-left: 25px;
    margin: 15px;
    height: 25px;
    background-image: url('https://cdn4.iconfinder.com/data/icons/casual-events-and-opinions/256/User-512.png') ;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: left;
    background-color: grey;
}
<div >

    <input class="hai" placeholder="Search term">

</div>


1
問題は、フォントの素晴らしいアイコンの使用に関するものです
gaitat 2017

-5

これをunicodeまたはfontawesomeで動作させるには、以下のようなspanwith を追加する必要classがあります。

HTML:

<span class="button1 search"></span>
<input name="username">

CSS:

.button1 {
    background-color: #B9D5AD;
    border-radius: 0.2em 0 0 0.2em;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5); 
    pointer-events: none;
    margin:1px 12px;    
    border-radius: 0.2em;    
    color: #333333;
    cursor: pointer;
    position: absolute;
    padding: 3px;
    text-decoration: none;           
}

1
これはテキスト入力内にアイコンを配置しません
Gianfranco P.

-9
<!doctype html>
<html>
  <head>
    ## Heading ##
    <meta charset="utf-8">
      <title>
        Untitled Document
      </title>
      </head>
      <style>
        li {
          display: block;
          width: auto;
        }
        ul li> ul li {
          float: left;
        }
        ul li> ul {
          display: none;
          position: absolute;
        }
        li:hover > ul {
          display: block;
          margin-left: 148px;
          display: inline;
          margin-top: -52px;
        }
        a {
          background: #f2f2ea;
          display: block;
          /*padding:10px 5px;
          */
          width: 186px;
          height: 50px;
          border: solid 2px #c2c2c2;
          border-bottom: none;
          text-decoration: none;
        }
        li:hover >a {
          background: #ffffff;
        }
        ul li>li:hover {
          margin: 12px auto 0px auto;
          padding-top: 10px;
          width: 0;
          height: 0;
          border-top: 8px solid #c2c2c2;
        }
        .bottom {
          border-bottom: solid 2px #c2c2c2;
        }
        .sub_m {
          border-bottom: solid 2px #c2c2c2;
        }
        .sub_m2 {
          border-left: none;
          border-right: none;
          border-bottom: solid 2px #c2c2c2;
        }
        li.selected {
          background: #6D0070;
        }
        #menu_content {
          /*float:left;
          */

        }
        .ca-main {
          padding-top: 18px;
          margin: 0;
          color: #34495e;
          font-size: 18px;
        }
        .ca-sub {
          padding-top: 18px;
          margin: 0px 20px;
          color: #34495e;
          font-size: 18px;
        }
        .submenu a {
          width: auto;
        }
        h2 {
          text-align: center;
        }
      </style>
      <body>
        <ul>
          <li>
            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 1
                </h2>
              </div>
            </a>
            <ul class="submenu" >
              <li>
                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_1
                    </h2>
                  </div>
                </a>
              </li>
              <li>

                <a href="#" class="sub_m2">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_2
                    </h2>
                  </div>
                </a>
              </li>
              <li >

                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_3
                    </h2>
                  </div>
                </a>

              </li>
            </ul>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 2
                </h2>
              </div>
            </a>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 3
                </h2>
              </div>
            </a>

          </li>
          <li>

            <a href="#"  class="bottom">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 4
                </h2>
              </div>
            </a>

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