Font Awesome: Colocando um ícone dentro de um input

admin 11 de novembro de 2016 2 Comments Ascii, FontAwesome, input, placeholder, Unicode, value

Entrando com mais um post bacana. Vamos aprender, de diversas formas, como incluir um ícone dentro de um input.

Primeiro passo é baixar o Font Awesome e criar um simples arquivo index.html. Se preferir, até mais simples, faça a chamada do Font Awesome por um CDN.

Não sabe o que é um CDN, clique aqui.

Os unicodes que você vai precisar estão aqui neste link.

Todo o código está comentado com vários exemplos. Se eu consegui você consegue, pode ficar tranquilo…

index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Font Awesome dentro de input</title>
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 
    <style type="text/css">
        body{
            font-family: Open Sans, Arial;
        }
 
        input{
            padding: 10px;
            width: 350px;
            color: #000;
        }
    </style>
 
</head>
<body>
    <!-- ***************************************************************************** -->
    <p>Forma 1</p>
    <style type="text/css">
        /*
        * utilizando unicode no placeholder
        */
        input#forma_1{
            font-family: "FontAwesome";
        }
    </style>
    <input type="text" id="forma_1" placeholder="&#xf087;">
    <br><br>
 
    <!-- ***************************************************************************** -->
    <p>Forma 2</p>
    <style type="text/css">
        /*
        * utilizando unicode no placeholder
        */
        input#forma_2{
            /* aqui você define o tamanho da fonte */
            font-size: 14px;
 
            /*
            se constar somente FontAwesome em font-family, aparece o ícone, porém o texto
            "informe seu e-mail" fica com a fonte padrão do navegador
            font-family: "FontAwesome";
            */
 
            /* fazendo dessa forma aparece o ícone e a fonte do texto é formatado */
            /* atenção: pra variar o ieka (i.e.) não funciona direito - mantém a fonte padrão */
            font-family: "FontAwesome", Open Sans, Arial;
 
            /* aqui você define a cor */
            color: #3d3d3d;
        }
 
        /*
        * utilizando position + before
        */
        #email {
            padding-left: 30px;
            width: 330px;
            color: #ff0000;
        }
        #email-label {
            position: relative;
        }
        #email-label:before {
            color: #ff0000;
            content:"\f003";
            font-family: FontAwesome;
            position: absolute;
            top: 2px;
            left: 10px;
        }
    </style>
    <input type="text" id="forma_2" placeholder="&#xf003; informe seu email">
    <br><br>
 
    <label id="email-label">
        <input type="text" id="email" placeholder="informe seu email" />
    </label>
    <br><br>
 
    <!-- ***************************************************************************** -->
    <p>Forma 3</p>
    <style type="text/css">
        /*
        * utilizando unicode no value
        */
        input#enviar{
            /* aqui você define o tamanho da fonte */
            font-size: 18px;
 
            /*
            se constar somente FontAwesome em font-family aparece o ícone porém o texto
            "informe seu e-mail" fica com a fonte padrão do navegador
            font-family: "FontAwesome";
            */
 
            /* fazendo dessa forma aparece o ícone e o texto fica formatado */
            font-family: "FontAwesome", Open Sans, Arial;
 
            /* aqui você define a cor */
            color: #FFF;
 
            /* definindo outros atributos */
            background-color: #00a0c4;
            border: 1px solid #00a0c4;
            border-radius: 4px;
            width: 150px;
            cursor: pointer;
        }
 
        /*
        * utilizando class + position
        */
        #box_icone_busca{
            width: 30px;
            height: 30px;
            padding: 10px;
            position: relative;
            left: -39px;
            top: 1px;
        }
        #icone_busca {
            color: #000;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        function sua_funcao_aqui(){
            alert("cliquei aqui!");
        }
    </script>
 
    <input type="submit" id="enviar" value="&#xf01b; ENVIAR" />
    <br><br>
 
    <input id="busca" type="text" placeholder="o que você procura?" />
    <span id="box_icone_busca">
        <i id="icone_busca" class="fa fa-search" onclick="sua_funcao_aqui()"></i>
    </span>
    <br><br>
</body>
</html>

<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Font Awesome dentro de input</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style type="text/css"> body{ font-family: Open Sans, Arial; } input{ padding: 10px; width: 350px; color: #000; } </style> </head> <body>  <p>Forma 1</p> <style type="text/css"> /* * utilizando unicode no placeholder */ input#forma_1{ font-family: "FontAwesome"; } </style> <input type="text" id="forma_1" placeholder=""> <br><br>  <p>Forma 2</p> <style type="text/css"> /* * utilizando unicode no placeholder */ input#forma_2{ /* aqui você define o tamanho da fonte */ font-size: 14px; /* se constar somente FontAwesome em font-family, aparece o ícone, porém o texto "informe seu e-mail" fica com a fonte padrão do navegador font-family: "FontAwesome"; */ /* fazendo dessa forma aparece o ícone e a fonte do texto é formatado */ /* atenção: pra variar o ieka (i.e.) não funciona direito - mantém a fonte padrão */ font-family: "FontAwesome", Open Sans, Arial; /* aqui você define a cor */ color: #3d3d3d; } /* * utilizando position + before */ #email { padding-left: 30px; width: 330px; color: #ff0000; } #email-label { position: relative; } #email-label:before { color: #ff0000; content:"\f003"; font-family: FontAwesome; position: absolute; top: 2px; left: 10px; } </style> <input type="text" id="forma_2" placeholder=" informe seu email"> <br><br> <label id="email-label"> <input type="text" id="email" placeholder="informe seu email" /> </label> <br><br>  <p>Forma 3</p> <style type="text/css"> /* * utilizando unicode no value */ input#enviar{ /* aqui você define o tamanho da fonte */ font-size: 18px; /* se constar somente FontAwesome em font-family aparece o ícone porém o texto "informe seu e-mail" fica com a fonte padrão do navegador font-family: "FontAwesome"; */ /* fazendo dessa forma aparece o ícone e o texto fica formatado */ font-family: "FontAwesome", Open Sans, Arial; /* aqui você define a cor */ color: #FFF; /* definindo outros atributos */ background-color: #00a0c4; border: 1px solid #00a0c4; border-radius: 4px; width: 150px; cursor: pointer; } /* * utilizando class + position */ #box_icone_busca{ width: 30px; height: 30px; padding: 10px; position: relative; left: -39px; top: 1px; } #icone_busca { color: #000; cursor: pointer; } </style> <script type="text/javascript"> function sua_funcao_aqui(){ alert("cliquei aqui!"); } </script> <input type="submit" id="enviar" value=" ENVIAR" /> <br><br> <input id="busca" type="text" placeholder="o que você procura?" /> <span id="box_icone_busca"> <i id="icone_busca" class="fa fa-search" onclick="sua_funcao_aqui()"></i> </span> <br><br> </body> </html>

Para testar o código acima clique aqui.

Espero que tenha gostado!

Dúvidas? Deixe nos comentários.

2 thoughts on “Font Awesome: Colocando um ícone dentro de um input”

silvio

18 de outubro de 2017 em 17:48

onde eu encontro mais desses codigos 
Resposta
- Tiago
  
  18 de outubro de 2017 em 21:28
  
  Olá Silvio.
  
  Acesse este link http://fontawesome.io/cheatsheet/
  
  Abraço
  Resposta

Você pode gostar também

Usando Font Awesome

JQuery: Enviando dados com FormData e $.ajax

Como adicionar Font Awesome no JsFiddle

2 thoughts on “Font Awesome: Colocando um ícone dentro de um input”

Deixe um comentário Cancelar resposta