164 votes

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

Je essaie d'insérer une icône utilisateur à l'intérieur du champ de saisie du nom d'utilisateur.

J'ai essayé l'une des solutions de la question similaire sachant que la propriété background-image ne fonctionnera pas car Font Awesome est une police de caractères.

Voici mon approche et je n'arrive 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 déclaré le font-face dans le fichier CSS par défaut de Font Awesome donc je n'étais pas sûr si ajouter 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');
 }

0voto

Richard Emert Points 1
.inp1{
color:#2E64FE;
width:350px;
height:35px;
border:solid;
font-size:20px;
text-align:left;
}

0voto

Rocky WEI Points 1

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

0voto

Floris Points 414

Ma solution a été d'avoir un conteneur relatif autour de l'input pour contenir l'icône. Ce conteneur extérieur contient un ::after avec l'icône souhaitée, positionnée absolue dans le conteneur.

HTML:

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

0voto

claudios Points 3559

Parfois, l'icône ne s'affiche pas en raison de la version de Font Awesome. Pour la version 5, le CSS devrait être

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

0voto

Shakthifuture Points 21

La solution simple ci-dessous a fonctionné pour moi.

Utilisez ce filtre pour implémenter la recherche : https://www.npmjs.com/package/ng2-search-filter

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X