# Como aplicar um ícone ao botão de upload

**URL:** <https://community.latromi.com.br/t/como-aplicar-um-icone-ao-botao-de-upload/1349>\
**Category:** Tutoriais\
**Tags:** css, form\
**Created:** [Outubro 31, 2024, 6:11pm UTC](https://community.latromi.com.br/t/como-aplicar-um-icone-ao-botao-de-upload/1349 "2024-10-31T18:11:27Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![daniel.giacomelli](https://community.latromi.com.br/user_avatar/community.latromi.com.br/daniel.giacomelli/32/1476_2.png) [@daniel.giacomelli](https://community.latromi.com.br/u/daniel.giacomelli)\
**Post date:** [Outubro 31, 2024, 6:11pm UTC](https://community.latromi.com.br/t/como-aplicar-um-icone-ao-botao-de-upload/1349/1 "2024-10-31T18:11:27Z")

</div>

## Visão Geral

No Formulário, existe um campo do tipo **Upload** , que permite que o usuário envie arquivos ao servidor.

Este campo é apresentado da seguinte forma no navegador.

![image](https://community.latromi.com.br/uploads/default/original/2X/4/4c85f32bd4eb94d7427c6fabe3ade818599c7587.png)

O **texto** do botão (neste exemplo, “Selecionar”), pode ser alterado através da propriedade “Texto do Botão”, no entanto não é possível atribuir um **ícone** ao botão.

Neste exemplo, vamos descobrir como adicionar um ícone da biblioteca **Font Awesome** no botao do campo “Upload” usando CSS.

## Escolhendo o ícone

Acesse o catálogo da biblioteca **Font Awesome** clicando [neste link](https://fontawesome.com/v4/icons/), e escolha o ícone que deseja utilizar.

Copie o código UTF8 do ícone.

 ![image](https://community.latromi.com.br/uploads/default/original/2X/2/29766a48e7ad440b5a575e4854006f542f9c6c18.png)

## CSS no Formulário

Adicione um Arquvo CSS no **Formulário** , e insira o código abaixo, substituindo “uplArquivo” pelo nome do campo Upload no Formulário, e o código UTF8 do ícone que você selecionou no atributo “content”, presecdido por `\`:

```css
.DynamicForm [data-field-name="Conteudo"] .RadAsyncUpload .ruBrowse:before {
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: 1rem;
    color: Purple;
    content: "\f083";
}
.DynamicForm [data-field-name="Conteudo"] .RadAsyncUpload .ruBrowse {
    min-width: unset;
}

```

## Resultado

Após adicionar o CSS no Fornulário, deixe em branco a propriedade “Texto do Botão” do campo de Upload. O resultado esperado será esse:

![image](https://community.latromi.com.br/uploads/default/original/2X/b/b00a5d53309d721d85f90aaf9b4f0ee818409f1f.png)