web-dev-qa-db-fra.com

Icône Font Awesome à l'intérieur de l'élément de saisie de texte

J'essaie d'insérer une icône d'utilisateur dans le champ de saisie du nom d'utilisateur. 

J'ai essayé l'une des solutions de la question similar Sachant que la propriété background-image ne fonctionnera pas, car Font Awesome est une police.

Ce qui suit est mon approche et je ne parviens pas à afficher l’icône.

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

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

J'ai la police de caractères déclarée dans la police par défaut awesome css, donc je ne savais pas si l'ajout de font-family ci-dessus était la bonne approche.

 @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');
 }
htmlcssfontsfont-awesome
107
Seong Lee

Tu as raison. : before et: after pseudo contenu n'est pas destiné à fonctionner sur du contenu remplacé tel que les éléments img et input L'ajout d'un élément d'habillage et la déclaration d'une famille de polices est l'une des possibilités, tout comme l'utilisation d'une image d'arrière-plan. Ou peut-être un texte d’emplacement réservé html5 répond à vos besoins:

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

Les navigateurs qui ne prennent pas en charge cet attribut l’ignoreront tout simplement.

METTRE À JOUR

Le sélecteur de contenu avant sélectionne l'entrée: input[type="text"]:before. Vous devez sélectionner le wrapper: .wrapper:before. Voir http://jsfiddle.net/allcaps/gA4rx/ . J'ai également ajouté la suggestion d'espace réservé où l'encapsuleur est redondant. 

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

Se retirer

Font Awesome utilise la zone PUA (Unicode Private Use Area) pour stocker les icônes. Les autres caractères ne sont pas présents et reviennent aux valeurs par défaut du navigateur. Cela devrait être le même que n'importe quelle autre entrée. Si vous définissez une police sur des éléments d'entrée, indiquez la même police que l'option de secours dans les cas où nous utilisons une icône. Comme ça: 

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

Sortie:

enter image description here

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>

(Ou)

Sortie:

 enter image description here

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>
98
Palani Kumar

Vous pouvez utiliser un wrapper. Dans l'emballage, ajoutez l'élément awesome font i et l'élément input .

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

puis définissez la position du wrapper sur relative: 

.wrapper { position: relative; }

puis définissez la position de l'élément i sur absolue et définissez l'emplacement correct pour celle-ci: 

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

(C'est un bidouillage, je sais, mais ça fait le travail.)

19
Mero

Cette réponse fonctionnera pour vous si vous devez remplir les conditions suivantes (aucune des réponses actuelles ne remplissait ces conditions):

  1. L'icône est inside la zone de texte
  2. L'icône ne doit pas disparaître lorsque du texte est saisi dans la saisie et que le texte saisi se place à droite de l'icône
  3. Cliquer sur l'icône devrait mettre en évidence l'entrée sous-jacente

Je crois que 3 est le nombre minimal d’éléments HTML permettant de satisfaire à ces conditions:

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

13
Skeets

Pas besoin de coder beaucoup ... suivez simplement les étapes suivantes:

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

vous pouvez trouver les liens vers Unicode (fontawesome) ici ...

FontAwesome Unicode pour les icônes

8
Rashid Iqbal

Après avoir lu diverses versions de cette question et cherché dans les environs, j'ai trouvé une solution relativement propre et sans js. Elle ressemble à la solution @allcaps mais évite le problème de la modification de la police d'entrée par rapport à la police du document principal.

Utilisez l'attribut ::input-placeholder pour personnaliser le texte de l'espace réservé. Cela vous permet d'utiliser votre police d'icône comme police d'espace réservé et votre corps (ou une autre police) comme texte de saisie. Actuellement, vous devez spécifier des sélecteurs spécifiques au fournisseur.

Cela fonctionne bien tant que vous n'avez pas besoin d'une combinaison d'icône et de texte dans votre élément d'entrée. Si vous le faites, vous devrez utiliser le texte de substitution comme police de navigateur par défaut (les caractères simples sur le mien) pour les mots.

Par exemple.
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';
}

Fiddle avec des sélecteurs à préfixe de navigateur: http://jsfiddle.net/gA4rx/78/

Notez que vous devez définir chaque sélecteur spécifique au navigateur en tant que règle distincte. Si vous les combinez, le navigateur l'ignorera.

5
harryg

J'ai réalisé cela comme si

  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>

Le résultat ressemble à ceci:

 result

Note de côté

Veuillez noter que j'utilise Ruby on Rails afin que mon code résultant semble un peu gonflé Le code de vue dans slim est en réalité très concis:

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
Besi

Pour moi, un moyen facile d’avoir une icône "dans" une entrée de texte sans avoir à essayer d’utiliser des pseudo-éléments avec un caractère génial, unicode, etc., est d’avoir la saisie de texte et l’icône dans un élément wrapper dans lequel nous positionnerons relative, puis positionnez l’entrée de recherche et l’icône absolue de police géniale.

De la même manière que nous le faisons avec des images de fond et du texte, nous le ferions ici. Je pense que cela convient également aux débutants, car le positionnement CSS est quelque chose que les débutants devraient apprendre au début de leur processus de codage. Le code est donc facile à comprendre et à réutiliser.

    <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;
    }
2
Gerard

Construire sur la suggestion de toutes les capsules. Voici la méthode d'arrière-plan font-awesome avec le moins de code 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";
}
1
Jonathan

J'ai trouvé le moyen le plus simple avec bootstrap 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>
1
Henry O.

Rendre l'icône cliquable pour se concentrer à l'intérieur de l'élément d'entrée de texte.

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>

Ajoutez simplement l'icône de votre choix dans la balise <i>, dans la bibliothèque Font Awesome, et profitez des résultats.

1
Armand
::-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">
0
nobjta_9x_tq
.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>
0
Ola Olushesi
<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>
0
Richard Emert