HTML: Incluir ícone dentro do input de submit

Publicado em 09/06/2020

Neste artigo vamos aprender como incluir ícone dentro do input de submit dos formulários de HTML, com uma técnica um tanto inusitada e fácil.

icone no input de submit capa

Fala programador(a), beleza? Bora aprender como inserir ícones em inputs!

Primeiramente é necessário esclarecer que não é tão prático adicionar ícone a uma tag input, pois eles não aceitam manipulação de HTML interna

Ou seja, não podemos adicionar elementos novos dentro de uma tag de input

Então nós executamos essa técnica fazendo uma pequena mudança, o input veria um button de type submit

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

120 aulas
4 projetos
9h 45min

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

E a tag button aceita HTML, então podemos inserir um ícone dentro e fazer qualquer submit com ícone

Veja o exemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Como inserir ícone no input de submit</title>
    <meta charset="utf-8">
    <!-- fonte de ícones -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"> 
</head>
<body>
    <div>
        <h1>Preencha seu nome e clique em enviar</h1>
    </div>
    <form>
        <div>
            <input type="text" name="name" placeholder="Insira seu nome">
        </div>
        <div>
            <button type="submit">Enviar <span class="material-icons">send</span></button>
        </div>
    </form>
</body>
</html>

Este é o HTML do nosso exemplo, porém veja que já resolvemos o problema:

icone no input ex 1

Porém vamos fazer alguns ajustes no CSS para deixar o formulário mais profissional:

body {
    margin: 50px;
    font-family: Helvetica;
}

div	{
    margin: 20px;
}

input {
    padding: 5px 15px;
    width: 280px;
    box-sizing: border-box;
}

button {
    background-color: lightblue;
    color: #FFF;
    border: none;
    height: 30px;
    line-height: 30px;
    width: 140px;
    position: relative;
    cursor: pointer;
}

span.material-icons {
    font-size: 18px;
    position: absolute;
    right: 15px;
    top: 6px;
}

E assim temos uma simulação parecida com alguns formulários que utilizam a técnica de ícone no input, veja:

icone no input ex 2

Perceba também que utilizamos uma fonte de ícones chamada Material Icon, que é free

Você pode utilizar em seus projetos também! Veja o site deles aqui

Conclusão

Neste artigo vimos possibilidade de inserir um ícone dentro do input de submit

Como dito antes, trocamos o input por um button, pois facilita muito a manutenção do HTML e evita gambiarras desnecessárias

Pois o funcionamento se mantém o mesmo, uma vez que o button tenha o type de submit

Depois é só adicionar uma fonte de ícone de sua preferência, nesse caso utilizamos o Material Icon

E criamos o elemento de ícone dentro do botão e posicionamos ele de acordo com a nossa necessidade

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Escrito por | Matheus Battisti

Fundador da Hora de Codar

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Canal no YouTube LinkedIn