텍스트 입력 요소 안의 글꼴 굉장한 아이콘

사용자 이름 입력 필드에 사용자 아이콘을 삽입하려고합니다.

Font Awesome 이 글꼴 이므로 속성이 작동하지 않는다는 것을 알고 비슷한 질문 에서 해결책 중 하나를 시도했습니다 .background-image

다음은 내 접근 방식이며 아이콘을 표시 할 수 없습니다.

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

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

기본 글꼴 멋진 CSS에서 글꼴 얼굴을 선언 했으므로 위의 글꼴 모음을 추가하는 것이 올바른 방법인지 확실하지 않았습니다.

 @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');
 }

네가 옳아. : 전과 후 의사 콘텐츠는 유사 콘텐츠 img및 input요소 와 교체 된 콘텐츠에서 작동하지 않습니다 . 래핑 요소를 추가하고 글꼴 모음을 선언하는 것은 배경 이미지를 사용하는 것과 같은 가능성 중 하나입니다. 또는 html5 자리 표시 자 텍스트가 필요에 맞을 수도 있습니다.

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

플레이스 홀더 속성을 지원하지 않는 브라우저는이를 무시합니다.

최신 정보

이전 컨텐츠 선택기는 입력을 선택합니다 input[type="text"]:before.. 랩퍼를 선택해야합니다 .wrapper:before.. http://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은 PUA (Unicode Private Use Area)를 사용하여 아이콘을 저장합니다. 다른 문자는 존재하지 않으며 브라우저 기본값으로 돌아갑니다. 다른 입력과 동일해야합니다. 입력 요소에 글꼴을 정의한 경우 아이콘을 사용하는 상황에서 대체와 동일한 글꼴을 제공하십시오. 이처럼 :

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

산출:

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>

랩퍼를 사용할 수 있습니다. 랩퍼 내부에 멋진 글꼴 요소 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; }

(그것은 알고있다, 그러나 그것은 일을 끝낸다.)

이 답변은 다음 조건을 충족해야하는 경우 유용합니다 (현재 답변 중 어느 것도 이러한 조건을 충족하지 않음).

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>

많이 코딩 할 필요가 없습니다. 다음 단계를 따르십시오.

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

유니 코드 ( fontawesome )에 대한 링크는 여기 에서 찾을 수 있습니다 ...

아이콘의 FontAwesome 유니 코드

이 질문의 다양한 버전을 읽고 주변을 검색하면 깨끗하고 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/

각 브라우저 별 선택기를 별도의 규칙으로 정의해야합니다. 그것들을 결합하면 브라우저는 그것을 무시합니다.

부트 스트랩 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>

나는 이것을 이렇게 달성했다

  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를 사용하고 있으므로 결과 코드가 약간 나빠 보입니다. 슬림 한 뷰 코드는 실제로 매우 간결합니다.

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

나를 위해, 글꼴 멋진 유니 코드 등의 의사 요소를 사용하지 않고 텍스트 입력에 "아이콘 안에"아이콘을 넣는 쉬운 방법은 텍스트 입력과 아이콘을 래퍼 요소 내에 배치하는 것입니다. 그런 다음 검색 입력과 멋진 글꼴 아이콘 절대 위치를 모두 지정하십시오.

배경 이미지 및 텍스트와 같은 방식으로 여기에서 수행합니다. 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;
    }

allcaps 제안을 바탕으로합니다. HTML이 가장 적은 글꼴 멋진 배경 방법은 다음과 같습니다.

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

클릭 가능한 아이콘을 만들어 텍스트 입력 요소 내부에 초점을 맞 춥니 다.

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 라이브러리 의 태그 안에 원하는 아이콘을 추가 하고 결과를 즐기십시오.

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

순전히 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;
}

내 솔루션 은 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;
    }
}

입력 요소 안에 멋진 글꼴 아이콘을 추가하는 내 솔루션. 다음은 입력 요소 안에 아이콘을 추가하는 간단한 코드입니다. 아래 코드를 복사하여 추가하려는 곳에 넣으십시오. 또는 아이콘을 변경하려면 아이콘 코드를 <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>

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

쉬운 방법이지만 부트 스트랩이 필요합니다.

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

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

나는 아래 물건을 시험해 보았고 실제로는 잘 작동합니다 .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>

유니 코드 또는 fontawesome와 함께이 문제를 해결하려면, 당신은 추가해야 span와 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;           
}

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