Police Génial icône de l'intérieur de la saisie de texte de l'élément
Je suis en train d'insérer une icône d'utilisateur nom d'utilisateur à l'intérieur de champ de saisie.
J'ai essayé la solution de la question similaire
sachant que background-image
propriété ne fonctionne pas depuis Police Impressionnant est une police de caractères.
Ce qui suit est mon approche et je ne peux pas obtenir l'affichage de 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 face à la police a déclaré à la police par défaut génial css donc je n'étais pas sûr si l'ajout d'une police de caractères de la famille ci-dessus a été 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');
}
- Que voulez-vous savoir? Quelle est la question / erreur?
- Oups..j'avoue qu'il n'y a aucun moyen d'identifier l'erreur je rencontre de simplement en regardant mon post original. J'ai édité un peu.
- Voir ma réponse mis à jour.
Vous devez vous connecter pour publier un commentaire.
Vous avez raison. :before et :after pseudo contenu n'est pas destiné à travailler sur remplacé le contenu comme
img
etinput
éléments. L'ajout d'un élément d'habillage et de le déclarer à la police-famille est l'une des possibilités est d'utiliser une image d'arrière-plan. Ou peut-être un html5 texte de l'espace réservé adapté à vos besoins:Navigateurs qui ne supportent pas l'espace réservé attribut sera tout simplement l'ignorer.
Mise à JOUR
L'avant du contenu sélecteur 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 aussi ajouté l'espace réservé suggestion où l'emballage est redondante.
De secours
Police Impressionnant utilise l'Unicode Usage Privé (PUA) pour stocker des icônes. Les autres personnages ne sont pas présents et retombent sur le navigateur par défaut. Que doit être le même que toute autre entrée. Si vous définissez une police sur des éléments d'entrée, puis fournir la même police que de secours pour les situations où l'utilisation d'une icône. Comme ceci:
input { font-family: 'FontAwesome' YourFont; }
. Cela vous aide? Vous pouvez toujours poser une nouvelle question.De sortie:
HTML:
CSS:
(Ou)
De sortie:
HTML:
CSS:
z-index: 1
fera le sous-jacent d'entrée attraper le focus lorsque vous cliquez sur l'icône - quelque chose que vous ne voulez par exemple lors de l'ajout d'un datepicker.position: relative
(marges négatives n'en avez pas besoin), niz-index
(dès que l'élément est rendu après l'entrée)Vous pouvez utiliser un wrapper. À l'intérieur de l'emballage, ajoutez la police génial élément
i
et lainput
élément.puis définissez le wrapper position du parent:
et puis définissez la
i
de l'élément en position absolue, et de définir le bon endroit pour cela:(C'est un hack, je sais, mais il fait le travail.)
Cette réponse va travailler pour vous si vous avez besoin les conditions suivantes sont remplies (aucun des actuels réponses à ces conditions):
Je crois que le 3 est le nombre minimal d'éléments HTML pour satisfaire à ces conditions:
CSS:
HTML:
Pas besoin de code beaucoup... il suffit de suivre les étapes suivantes:
vous pouvez trouver les liens de l'Unicode(fontawesome) ici...
FontAwesome Unicode pour les icônes
Avoir lu différentes versions de cette question et en cherchant autour de moi, je suis venu avec très propre, js-gratuit, solution. Il est similaire à @allcaps solution, mais évite la question de l'entrée de la police d'être changé à l'écart du principal document de la police.
Utiliser le
::entrée-espace réservé
l'attribut spécifiquement le style du texte de l'espace réservé. Cela vous permet d'utiliser votre icône de la police que l'espace réservé de la police et de votre corps (ou d'autres de la police qu'à la saisie de texte. Actuellement, vous devez spécifier les fournisseurs spécifiques de sélecteurs.Cela fonctionne bien aussi longtemps que vous n'avez pas besoin d'une combinaison de l'icône et du texte dans votre élément d'entrée. Si vous le faites alors vous aurez besoin de mettre en place avec le texte de l'espace réservé étant le navigateur par défaut de la police (plaine serif sur la mienne) pour les mots.
E. g.
HTML
CSS
Tripoter navigateur préfixé sélecteurs: http://jsfiddle.net/gA4rx/78/
Notez que vous devez définir chaque navigateur spécifique sélecteur en tant que séparé de la règle. Si vous les combinez le navigateur de l'ignorer.
font-family
pour ce sélecteur en ce moment. Nous ne pouvons qu'espérer pour plus d'acceptation répandue dans l'avenir.J'ai fait parvenir comme
CSS:
HTML:
Le résultat ressemble à ceci:
Côté remarque
Veuillez noter que je suis en utilisant Ruby on Rails donc mon code ressemble un peu gonflé. Le code de la vue slim est en fait très concise:
Pour moi, un moyen facile d'avoir une icône "dans" une saisie de texte sans avoir à essayer d'utiliser des pseudo-éléments avec la police génial unicode, etc, est d'avoir la saisie de texte et l'icône à l'intérieur d'un élément wrapper qui nous permettra de position relative, et la position à la fois la recherche de l'entrée et de la police génial icône absolue.
La même manière, nous faisons avec les images de fond et de texte, nous voudrions faire ici. J'ai l'impression que c'est bon pour les débutants ainsi, comme le positionnement css est quelque chose d'un débutant doit apprendre dans le début de leur codage de voyage, de sorte que le code est facile à comprendre et à réutiliser.
Bâtiment sur allcaps suggestion. Voici le font-awesome arrière-plan de la méthode, avec le moins de code HTML:
Rendre cliquable icône à se concentrer à l'intérieur de la saisie de texte de l'élément.
CSS
HTML
Juste ajouter selon icône que vous voulez à l'intérieur de la
<i>
tag, de la Police Impressionnant de la bibliothèque, et profiter des résultats.J'ai trouvé le moyen le plus facile en utilisant bootstrap 4.
CSS:
HTML:
J'ai essayé les trucs ci-dessous et il fonctionne vraiment bien
HTML
CSS:
HTML:
À ce travail avec les caractères unicode ou fontawesome, vous devez ajouter un
span
avecclass
comme ci-dessous:En HTML:
En CSS: