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

Question

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

Demandé el 10 de Octobre, 2013: Quand la question a-t-elle été
479103 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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

Demandé el 10 de Octobre, 2013 par Seong Lee

Answer 1

5 Réponses

Answer 2

0voto

Aghazada Jamil Points 7

<!DOCTYPE html>
<html lang="fr">
<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>

Répondu el 15 de Mai, 2021 par Aghazada Jamil (7 Points )

Answer 3

-1voto

user198829 Points 16

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

Répondu el 14 de Décembre, 2018 par user198829 (16 Points )

Answer 4

-3voto

Sandid Points 5

J'ai essayé les éléments ci-dessous et cela fonctionne vraiment bien 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;
}

Répondu el 13 de Juillet, 2016 par Sandid (5 Points )

Answer 5

-5voto

HTML Developer Points 569

Pour travailler ceci avec unicode ou fontawesome, vous devriez ajouter un span avec class comme ci-dessous:

En HTML:

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

Répondu el 12 de Novembre, 2013 par HTML Developer (569 Points )

Answer 6

-9voto

ankit Points 1

    ## Heading ##

        Document sans titre

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

                  Élément 1

                      Élément 1_1

                      Élément 1_2

                      Élément 1_3

                  Élément 2

                  Élément 3

                  Élément 4

Répondu el 26 de Mars, 2014 par ankit (1 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: