154

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

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

デフォルトの font 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');
 }
4

25 に答える 25

142

出力：

ここに画像の説明を入力

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>
于 2014-12-22T12:02:11.400 に答える
17

多くのコードを作成する必要はありません...次の手順に従ってください。

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

ここに Unicode ( fontawesome ) へのリンクがあります...

アイコンの FontAwesome Unicode

于 2017-06-28T12:57:49.950 に答える
7

この質問のさまざまなバージョンを読み、周りを検索した結果、非常にクリーンで 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/

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

于 2014-03-18T11:50:38.533 に答える
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
于 2016-05-20T11:03:06.897 に答える
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";
}
于 2015-06-29T14:11:12.773 に答える
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;
    }
}
于 2020-03-17T15:46:43.297 に答える
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;
}
于 2020-06-30T12:28:52.093 に答える
0

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

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

于 2017-02-21T17:04:18.813 に答える
0 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<style>
    .input {
        border: 1px solid black;
        width: 250px;
        padding: 10px;
        border-radius: 9999px;
    }
    .message-input {
        border: 0;
        outline: 0;
        margin-left: 20px;
    }
</style>
<body>
    <div class="input">
        <i class="fas fa-envelope"></i>
        <input class="message-input" type="text" placeholder="Message">
    </div>
</body>
</html>
于 2021-05-15T18:42:09.150 に答える
-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>
于 2014-03-26T09:33:27.760 に答える