Font Awesome: Colocando um ícone dentro de um input

11 de novembro de 2016 admin

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 comentários sobre “Font Awesome: Colocando um ícone dentro de um input”

silvio

18 de outubro de 2017 em 17:48
Link permanente

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

Você pode gostar também

JQuery: Enviando dados com FormData e $.ajax

HTML5: datalist

Usando Font Awesome

2 comentários sobre “Font Awesome: Colocando um ícone dentro de um input”

Deixe um comentário Cancelar resposta