Bootstrap Icons: conheça os principais e copie o código para usar agora!

Utilizar ícones sempre foi algo muito praticado, desde os primórdios do universo digital, e os Bootstrap Icons existem para nos ajudar nisso. Vemos ícones em todos os lugares, eles são os responsáveis por uma comunicação mais ágil e intuitiva entre os recursos desenvolvidos e as pessoas que os utilizarão.

De maneira geral, o funcionamento de toda a Internet seria mais complicado se não existissem os ícones. Você verá mais sobre esse tópico e o tamanho da importância desses recursos presentes nas ferramentas utilizadas todos os dias pelas pessoas desenvolvedoras, no decorrer deste nosso guia.

Para ajudar você a compreender até os mínimos detalhes desse assunto, abordaremos os principais recursos que envolvem os ícones do Bootstrap. Vamos percorrer temas importantes para o entendimento de qualquer pessoa iniciante no uso desse framework:

Prepare sua IDE e vamos lá!

Saiba o que são e para que servem os Bootstrap Icons

Os Bootstrap Icons — ou ícones do Bootstrap Framework — são aqueles pequenos desenhos que usamos para indicar algumas ideias. Por exemplo, um carrinho de compras em um e-commerce ou uma seta indicando a entrada para algum local específico ou outra página.

Durante o desenvolvimento do Bootstrap 3, ocorreram algumas mudanças no modo de trabalhar os ícones. Por isso, lembre-se de que, dependendo da sua versão do Bootstrap — como o glyphicons, que mostraremos adiante, no nosso guia — eles não funcionarão, como na 4 e na 5.

Confira as vantagens de usar os Bootstrap Icons

Responsividade. Essa seria a resposta mais curta, quando pensamos nas vantagens trazidas pelos Bootstrap Icons para os nossos projetos. Pessoas programadoras mais experientes sabem bem o quanto é difícil trabalhar imagens nos projetos e sistemas da Web. Muitas vezes, o que era de bom tamanho para uma dimensão de tela, acaba sendo muito pequeno para outra — e vice-versa.

Ao trabalhar com ícones — que são imagens estáticas — o problema ocorre da mesma forma. É por esse motivo que existem esses ícones disponibilizados no Bootstrap. É uma maneira de centralizar e padronizar um conjunto imenso de símbolos que usamos no dia a dia durante o desenvolvimento de uma aplicação.

Outra imensa vantagem é que não precisamos nos preocupar com o armazenamento de uma imensa variedade desses ícones que nossos apps carregam, pois tudo é disponibilizado por CDNs. Você apenas precisa especificá-los em seu arquivo HTML — veremos mais detalhes sobre isso, um pouco mais adiante. 

Reaplicação e CSS

Usar os ícones também poupa o trabalho da equipe quando não há a necessidade de fazer diferentes tamanhos para a mesma imagem utilizada. Arquivos SVG, por exemplo, precisam somente ter seus tamanhos declarados no documento HTML:

<img src="https://u3r3f6s2.rocketcdn.me/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32">

Além disso, você poderá redimensionar esses ícones e estilizá-los da maneira que seu projeto necessitar, usando CSS e ícones em SVG:

<svg class="bi bi-exclamation-triangle text-success" width="32" height="32" fill="currentColor"">
</svg>

O código acima deverá apresentar um triângulo de atenção da cor verde no navegador.

Veja quais são os principais Bootstrap Glyphicons

Para quem usa até a versão 3 do Bootstrap, os glyphicons, certamente, serão a melhor solução quando implementamos os ícones em nossas aplicações. Para usá-los em suas páginas, é bem simples: precisamos apenas do nome do ícone, pois isso precisará ser declarado em nosso arquivo.

Por exemplo, se quisermos o ícone do avião em nossa página, usaremos o nome dele, que é “glyphicon-plane”. Ele é declarado junto à tag <span>, de acordo com o local em que queremos o ícone. Para que entenda melhor, trazemos um documento HTML completo para ajudar você a trabalhar com os glyphicons:

<!DOCTYPE html>
<html>
  <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
   <div class="container">
     <h2>Os Glyphicons do Bootstrap</h2>
     <p>Ícone Avião: <span class="glyphicon glyphicon-plane"></span></p>    
     <p>O ícone como um link
       <a href="#">
         <span class="glyphicon glyphicon-plane"></span>
       </a>
     </p>
     <p>O ícone em um botão:
       <button type="button" class="btn btn-default btn-sm">
         <span class="glyphicon glyphicon-plane"></span> Voar agora!
       </button>
     </p>
     <p>ìcone em botão estilizado:
       <a href="#" class="btn btn-info btn-lg">
         <span class="glyphicon glyphicon-plane"></span> Voar agora!
       </a>
     </p>
     <p>Unicode:
       <span class="glyphicon">&#xe108;</span>
     </p>
   </div>
  </body>
</html>

A página resultante desse código deverá ficar bem parecida com essa:

Imagem resultado do código com o texto "Glyphicons do Bootstrap e bootstrap icons de avião

Agora que já entendemos o funcionamento desses ícones, que tal testar outros? Abaixo, você pode conferir a lista completa de cada um dos ícones e seus respectivos nomes! Tente alterar o ícone do código que trouxemos de exemplo!

Lista dos principais Glyphicons

glyphicon-asterisk

glyphicon-asterisk

glyphicon-plus

glyphicon-plus

glyphicon-euro

glyphicon-euro

glyphicon-eur

glyphicon-eur

glyphicon-minus

glyphicon-minus

glyphicon-cloud

glyphicon-cloud

glyphicon-envelope

glyphicon-envelope

glyphicon-pencil

glyphicon-pencil

glyphicon-glass

glyphicon-glass

glyphicon-music

glyphicon-music

glyphicon-step-backward

glyphicon-step-backward

glyphicon-fast-backward

glyphicon-fast-backward

glyphicon-backward

glyphicon-backward

glyphicon-play

glyphicon-play

glyphicon-pause

glyphicon-pause

glyphicon-stop

glyphicon-stop

glyphicon-forward

glyphicon-forward

glyphicon-fast-forward

glyphicon-fast-forward

glyphicon-step-forward

glyphicon-step-forward

glyphicon-eject

glyphicon-eject

glyphicon-search

glyphicon-search

glyphicon-heart

glyphicon-heart

glyphicon-star

glyphicon-star

glyphicon-star-empety

glyphicon-star-empety

glyphicon-user

glyphicon-user

glyphicon-film

glyphicon-film

glyphicon-th-large

glyphicon-th-large

glyphicon-th

glyphicon-th

glyphicon-th-list

glyphicon-th-list

glyphicon-ok

glyphicon-ok

glyphicon-remove

glyphicon-remove

glyphicon-zoom-in

glyphicon-zoom-in

glyphicon-zoom-out

glyphicon-zoom-out

glyphicon-off

glyphicon-off

glyphicon-signal

glyphicon-signal

glyphicon-cog

glyphicon-cog

glyphicon-trash

glyphicon-trash

glyphicon-home

glyphicon-home

glyphicon-file

glyphicon-file

glyphicon-time

glyphicon-time

glyphicon-road

glyphicon-road

glyphicon-download-alt

glyphicon-download-alt

glyphicon-download

glyphicon-download

glyphicon-upload

glyphicon-upload

glyphicon-inbox

glyphicon-inbox

glyphicon-play-circle

glyphicon-play-circle

glyphicon-repeat

glyphicon-repeat

glyphicon-refresh

glyphicon-refresh

glyphicon-list-alt

glyphicon-list-alt

glyphicon-lock

glyphicon-lock

glyphicon-flag

glyphicon-flag

glyphicon-headphones

glyphicon-headphones

glyphicon-volume-off

glyphicon-volume-off

glyphicon-volume-down

glyphicon-volume-down

glyphicon-volume-up

glyphicon-volume-up

glyphicon-qrcode

glyphicon-qrcode

glyphicon-barcode

glyphicon-barcode

glyphicon-tag

glyphicon-tag

glyphicon-tags

glyphicon-tags

glyphicon-book

glyphicon-book

glyphicon-bookmark

glyphicon-bookmark

glyphicon-print

glyphicon-print

glyphicon-camera

glyphicon-camera

glyphicon-font

glyphicon-font

glyphicon-bold

glyphicon-bold

glyphicon-italic

glyphicon-italic

glyphicon-text-height

glyphicon-text-height

glyphicon-text-width

glyphicon-text-width

glyphicon-align-left

glyphicon-align-left

glyphicon-align-center

glyphicon-align-center

glyphicon-align-right

glyphicon-align-right

glyphicon-align-justify

glyphicon-align-justify

glyphicon-glyphicon-list

glyphicon-list

glyphicon glyphicon-indent-left

glyphicon-indent-left

glyphicon-indent-right

glyphicon-indent-right

glyphicon-facetime-video

glyphicon-facetime-video

glyphicon-picture

glyphicon-picture

glyphicon-map-marker

glyphicon-map-marker

glyphicon-adjust

glyphicon-adjust

glyphicon-tint

glyphicon-tint

glyphicon-edit

glyphicon-edit

glyphicon-share

glyphicon-share

glyphicon-check

glyphicon-check

glyphicon-move

glyphicon-move

glyphicon-chevron-left

glyphicon-chevron-left

glyphicon-chevron-right

glyphicon-chevron-right

glyphicon-plus-sign

glyphicon-plus-sign

glyphicon-minus-sign

glyphicon-minus-sign

glyphicon-remove-sign

glyphicon-remove-sign

glyphicon-ok-sign

glyphicon-ok-sign

glyphicon-question-sign

glyphicon-question-sign

glyphicon-info-sign

glyphicon-info-sign

glyphicon-screenshot

glyphicon-screenshot

glyphicon-remove-circle

glyphicon-remove-circle

glyphicon-ok-circle

glyphicon-ok-circle

glyphicon-ban-circle

glyphicon-ban-circle

glyphicon-arrow-left

glyphicon-arrow-left

glyphicon-arrow-right

glyphicon-arrow-right

glyphicon-arrow-up

glyphicon-arrow-up

glyphicon-arrow-down

glyphicon-arrow-down

glyphicon-share-alt

glyphicon-share-alt

glyphicon-resize-full

glyphicon-resize-full

glyphicon-resize-small

glyphicon-resize-small

glyphicon-exclamation-sign

glyphicon-exclamation-sign

glyphicon-gift

glyphicon-gift

glyphicon-leaf

glyphicon-leaf

glyphicon-fire

glyphicon-fire

glyphicon-eye-open

glyphicon-eye-open

glyphicon-eye-close

glyphicon-eye-close

glyphicon-warning-sign

glyphicon-warning-sign

glyphicon-plane

glyphicon-plane

glyphicon-calendar

glyphicon-calendar

glyphicon-random

glyphicon-random

glyphicon-comment

glyphicon-comment

glyphicon-magnet

glyphicon-magnet

glyphicon-chevron-up

glyphicon-chevron-up

glyphicon-chevron-down

glyphicon-chevron-down

glyphicon-retweet

glyphicon-retweet

glyphicon-shopping-cart

glyphicon-shopping-cart

glyphicon-import

glyphicon glyphicon-export

glyphicon-export

glyphicon glyphicon-send

glyphicon-send

glyphicon glyphicon-floppy-disk

glyphicon-floppy-disk

glyphicon glyphicon-floppy-saved

glyphicon-floppy-saved

glyphicon glyphicon-floppy-remove

glyphicon-floppy-remove

glyphicon glyphicon-floppy-save

glyphicon-floppy-save

glyphicon glyphicon-floppy-open

glyphicon-floppy-open

glyphicon glyphicon-credit-card

glyphicon-credit-card

glyphicon glyphicon-transfer

glyphicon-transfer

glyphicon glyphicon-cutlery

glyphicon-cutlery

glyphicon glyphicon-header

glyphicon-header

glyphicon glyphicon-compressed

glyphicon-compressed

glyphicon glyphicon-earphone

glyphicon-earphone

glyphicon glyphicon-phone-alt

glyphicon-phone-alt

glyphicon glyphicon-tower

glyphicon-tower

glyphicon glyphicon-stats

glyphicon-stats

glyphicon glyphicon-sd-video

glyphicon-sd-video

glyphicon glyphicon-hd-video

glyphicon-hd-video

glyphicon glyphicon-subtitles

glyphicon-subtitles

glyphicon glyphicon-sound-stereo

glyphicon-sound-stereo

glyphicon glyphicon-sound-dolby

glyphicon-sound-dolby

glyphicon glyphicon-sound-5-1

glyphicon-sound-5-1

glyphicon glyphicon-sound-6-1

glyphicon-sound-6-1

glyphicon glyphicon-sound-7-1

glyphicon-sound-7-1

glyphicon glyphicon-copyright-mark

glyphicon-copyright-mark

glyphicon glyphicon-registration-mark

glyphicon-registration-mark

glyphicon glyphicon-cloud_download

glyphicon-cloud-download

glyphicon glyphicon-cloud-upload

glyphicon-cloud-upload

glyphicon glyphicon-tree-conifer

glyphicon-tree-conifer

glyphicon glyphicon-tree-deciduous

glyphicon-tree-deciduous

glyphicon glyphicon-cd

glyphicon-cd

glyphicon glyphicon-save-file

glyphicon-save-file

glyphicon glyphicon-open-file

glyphicon-open-file

glyphicon glyphicon-level-up

glyphicon-level-up

glyphicon glyphicon-copy

glyphicon-copy

glyphicon glyphicon-paste

glyphicon-paste

glyphicon glyphicon-alert

glyphicon-alert

glyphicon glyphicon-equalizer

glyphicon-equalizer

glyphicon glyphicon-king

glyphicon-king

glyphicon glyphicon-queen

glyphicon-queen

glyphicon glyphicon-pawn

glyphicon-pawn

glyphicon glyphicon-bishop

glyphicon-bishop

glyphicon glyphicon-knight

glyphicon-knight

glyphicon glyphicon-baby-formula

glyphicon-baby-formula

glyphicon glyphicon-tent

glyphicon-tent

glyphicon glyphicon-blackboard

glyphicon-blackboard

glyphicon glyphicon-bed

glyphicon-bed

glyphicon glyphicon-apple

glyphicon-apple

glyphicon glyphicon-erase

glyphicon-erase

glyphicon glyphicon-hourglass

glyphicon-hourglass

glyphicon glyphicon-lamp

glyphicon-lamp

glyphicon glyphicon-duplicate

glyphicon-duplicate

glyphicon glyphicon-piggy-bank

glyphicon-piggy-bank

glyphicon glyphicon-scissors

glyphicon-scissors

glyphicon glyphicon-bitcoin

glyphicon-bitcoin

glyphicon glyphicon-btc

glyphicon-btc

glyphicon glyphicon-xbt

glyphicon-xbt

glyphicon glyphicon-yen

glyphicon-yen

glyphicon glyphicon-jpy

glyphicon-jpy

glyphicon glyphicon-ruble

glyphicon-ruble

glyphicon glyphicon-rub

glyphicon-rub

glyphicon glyphicon-scale

glyphicon-scale

glyphicon glyphicon-ice-lolly

glyphicon-ice-lolly

glyphicon glyphicon-ice-lolly-tasted

glyphicon-ice-lolly-tasted

glyphicon glyphicon-education

glyphicon-education

glyphicon glyphicon-option-horizontal

glyphicon-option-horizontal

glyphicon glyphicon-option-vertical

glyphicon-option-vertical

glyphicon glyphicon-menu-hamburger

glyphicon-option-menu-vertical

glyphicon glyphicon-modal-window

glyphicon-modal-window

glyphicon glyphicon-oil

glyphicon-oil

glyphicon glyphicon-grain

glyphicon-grain

glyphicon glyphicon-sunglasses

glyphicon-sunglasses

glyphicon glyphicon-text-size

glyphicon-text-size

glyphicon glyphicon-text-color

glyphicon-text-color

glyphicon glyphicon-text-background

glyphicon-text-background

glyphicon glyphicon-object-align-top

glyphicon-object-align-top

glyphicon glyphicon-object-align-bottom

glyphicon-object-align-bottom

glyphicon glyphicon-object-align-horizontal

glyphicon-object-align-horizontal

glyphicon glyphicon-object-align-left

glyphicon-object-align-left

glyphicon glyphicon-object-align-vertical

glyphicon-object-align-vertical

glyphicon glyphicon-object-align-right

glyphicon-object-align-rightglyphicon glyphicon-console

glyphicon-console

glyphicon glyphicon-superscript

glyphicon-superscript

glyphicon glyphicon-subscript

glyphicon-subscript

glyphicon glyphicon-menu_left

glyphicon-menu_left

glyphicon glyphicon-menu-right

glyphicon-menu-right

glyphicon glyphicon-menu-down

glyphicon-menu-down

glyphicon glyphicon-menu-up

glyphicon-menu-up

Aprenda a baixar e instalar os principais pacotes de Bootstrap Icons

Como vimos, se o seu projeto estiver usando até a versão 3 do Bootstrap, usar o link do CDN e os nomes dos ícones em seu arquivo HTML já resolverá boa parte de seus problemas referentes ao tema.

Se você utiliza versão 4 ou superior, o mais recomendado é instalar o pacotes dos ícones, a partir de seu ambiente de desenvolvimento, com o seguinte código:

npm i bootstrap-icons

Usando Bootstrap Icons com SVGs

Dessa forma, nas versões mais recentes do Bootstrap, você poderá trabalhar os ícones diretamente em SVG e será capaz de redimensioná-los como o projeto necessitar, sem a necessidade de alterar as imagens de seu projeto:

<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" fill="currentColor" class="bi bi-box2-heart-fill" viewBox="0 0 16 16">
  <path d="M3.75 0a1 1 0 0 0-.8.4L.1 4.2a.5.5 0 0 0-.1.3V15a1 1 0 0 0 1 1h14a1 1 0 0 0 1-12.5a.5.5 0 0 0-.1-.3L13.05.4a1 1 0 0 0-.8-.4h-8.5ZM8.5 4h6l.5.667V5H1v-.333L1.5 4h6V1h1v3ZM8 7.993c1.664-1.711 5.825 1.283 0 5.132-5.825-3.85-1.664-6.843 0-5.132Z"></path>
</svg>

Aqui, usamos o ícone box2-heart-fill, que nos mostrará a seguinte imagem SVG no navegador:

ícone box2-heart-fill bootstrap icons

Confira como usar o Bootstrap Icons

Você pode usar o Bootstrap Icons seguindo apenas duas etapas. No primeiro passo, inclua o link da CDN do Bootstrap em nosso arquivo HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

A linha deverá ser incluída no mesmo trecho que carrega a stylesheet de CSS de sua página!

Na segunda etapa, para usar os ícones em suas páginas, você usará sempre a seguinte sintaxe:

<i class="bi- *NOME DO ÍCONE AQUI* "></i> 

Ou seja, se quisermos uma seta para cima, fazemos da seguinte forma: 

<i class="bi-arrow-up"></i>

A lista que passamos pode ajudar você a escolher os melhores ícones a utilizar — apenas retire o “glyphicon”, que dará tudo certo.

Escrevendo e usando o código

Usando as dicas que acabamos de dar, escrevemos mais esse código para ajudar na compreensão do funcionamento dos ícones do Bootstrap:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Usando ícones do Bootstrap!!!</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
   <p><i class="bi-person" style="font-size: 36px;"></i></p>
   <p><i class="bi-person-circle" style="font-size: 36px; color: blue;"></i></p>
   <button type="button"><i class="bi-search"></i> Search</button>
</body>
</html>      

O resultado no navegador deverá ser bem parecido com esse:

Resultado do navegador bootstrap icons

Você pode reaproveitar o código que mostramos e substituir outros ícones, assim como usar com outros componentes do Bootstrap, alterar o tamanho, a cor ou o tipo de botão.

<i> e <span> : definindo o posicionamento do ícone

As tags HTML <i> e <span> têm o mesmo funcionamento em nossos documentos HTML, sendo a última, <span>, a mais recomendada semanticamente para nossos projetos. Essas tags são utilizadas para definir o posicionamentos de nossos ícones — o “i” é de “in line”, ou “na linha”, em português.

fa-xs, fa-sm, fa-lg: alterando o tamanho do ícone

Para aumentarmos o tamanho de nossos ícones, normalmente, utilizamos o fa-xs, fa-sm e o fa-lg — cada um aumentando em 33% o tamanho do ícone. Lembrando que as dimensões são sempre relativas aos contêineres da página que estamos desenvolvendo.

Usando Bootstrap Icons integrado na página

É possível incorporar os ícones do Bootstrap em suas páginas HTML:

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>

Nesse caso, usamos a customização de um ícone em sua altura e largura para mostrar seu funcionamento. O navegador deverá mostrar a seguinte imagem no tamanho 32×32 em qualquer modelo de tela ou dispositivo:

Usando Bootstrap Icons com SVG Sprite

Os Sprites SVG permitem que você faça referência a um arquivo externo, semelhante a um elemento <img>. Como estamos falando de ícones, você pode alterar o valor de currentColor para facilitar a criação de temas e na padronização do projeto:

<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>

Teremos o seguinte ícone sendo apresentado no navegador:

bootstrap icons de coração

Usando Bootstrap Icons como imagens externas

Podemos copiar os arquivos dos ícones nas pastas de nossos projetos e, depois, utilizá-los como imagens em nossa páginas:

<img src="https://u3r3f6s2.rocketcdn.me/assets/img/alarm.svg" alt="Alarm Icon" width="32" height="32">

O navegador deverá mostrar a imagem que, na verdade, é um, ícone do Bootstrap:

icon de despertador

Editando a fonte e estilo dos Bootstrap Icons

Também é possível editarmos os estilos dos ícones, usando as configurações do CSS:

<i class="bi-alarm" style="font-size: 2rem; color: black;"></i>
Icon de despertador

Se alterarmos, no mesmo código, os valores para “20rem” e “color:yellow” teremos os seguinte resultado:

Bootstrap icon de despertador amarelo

Usando acessibilidade com Bootstrap Icons

Podemos melhorar muito a acessibilidade de nossas aplicações com a ajuda do Bootstrap. Para ícones puramente decorativos, adicionamos o comando “aria-hidden” como “true” — assim como apontado, a seguir:

aria-hidden="true"

Fazendo isso, alguns dispositivos com conexões mais lentas não precisarão carregar os ícones de nossa página, em casos em que esse processo esteja lento.

Também podemos trazer textos alternativos para cada um dos ícones que utilizamos:

<!-- "alt=" em elemento de <img> -->
<img src="https://u3r3f6s2.rocketcdn.me/assets/img/bootstrap.svg" alt="Bootstrap Ícone"

Isso ajudará nos momentos em que o usuário passa por algum problema na conexão, mas mesmo assim, usará seu serviço sem maiores problemas. Legal, não é mesmo?

Chegamos ao final de mais um guia. Nele, podemos conferir o que são os Bootstrap Icons e para que os utilizamos durante as rotinas de desenvolvimento de aplicações Web. Vimos suas principais vantagens e algumas variantes disponíveis no framework.

Você também conferiu detalhamentos do processo de uso, com exemplos práticos que ajudarão muito as pessoas iniciantes a entender o básico desse componente, como alteração dos tamanhos e das cores padrão dos ícones disponibilizados. Aprendemos a usar vários tipos de ícones e entendemos a relação entre sua adoção e a necessidade das principais configurações.

Sem dúvidas que o conhecimento do framework Bootstrap trazido até aqui ajudará muito as pessoas iniciantes na programação a melhorar ainda mais suas habilidades, seus projetos e oportunidades no universo de desenvolvimento moderno.

Conseguiu entender sobre o que é o Bootstrap Icons? Que tal aprender ainda mais a programar aplicações para a Web? Faça a inscrição em nosso processo seletivo e acesse nosso curso introdutório gratuito de JavaScript! Tire todas as suas dúvidas em nossa comunidade do Slack. Inscreva-se, agora mesmo!