Bootstrap icons possui mais de 1600 opções de ícones para auxiliar você a construir seus sites.

Bootstrap icons é o pacote de ícones disponibilizado inicialmente pela versão 5 do Bootstrap. Ele possui atualmente mais de 1600 ícones e pode ser obtido no site: https://icons.getbootstrap.com/.

Podemos declarar o Bootstrap icons para uso em uma página HTML com o seguinte código:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

Há outras formas de realizar a instalação, como por exemplo, usando npm ou baixando os arquivos do código fonte. Acesse https://icons.getbootstrap.com/#install para saber mais detalhes ou obter o link de acesso da versão mais recente via CDN.

Para declarar um ícone, podemos usar a tag <i> da seguinte forma:

<i class=”[código-do-ícone]”>

Por exemplo:

1 <!-- ícone de página inicial -->

2 <i class=”bi bi-house-fill”></i>

3

4 <!-- ícone de gráfico -->

5 <i class=”bi bi-bar-chart”>

6

7 <!-- ícone de pessoa -->

8 <i class=”bi bi-person-circle”>

9

10 <!-- ícone de download -->

11 <i class=”bi bi-arrow-down-circle-fill”></i>

12

13 <!-- ícone de ajuda -->

14 <i class=”bi bi-question-circle-fill”></i>

Neste exemplo, apresentamos cinco diferentes ícones (consulte a documentação para encontrar outros tipos).

Você pode alterar a cor dos elementos mexendo nas propriedades de texto (por exemplo, utilize as classes text-[cor], como a text-primary). Para alterar o tamanho mexa nas propriedades que alteram o tamanho da fonte, como font-size. Por exemplo:

1 <!-- ícone home -->

2 <i class=”bi bi-house-fill text-primary”></i>

3

4 <!-- ícone de gráfico -->

5 <i class=”bi bi-bar-chart text-warning”>

6

7 <!-- ícone de pessoa -->

8 <i class=”bi bi-person-circle text-success”>

9

10 <!-- ícone de download -->

11 <i class=”bi bi-arrow-down-circle-fill text-danger”></i>

12

13 <!-- ícone de ajuda => TAMANHO AUMENTADO -->

14 <i class=”bi bi-question-circle-fill text-info”

15 style=”font-size: 30px”></i>

Conclusões

Aqui apresentamos uma breve introdução à nova versão do framework Bootstrap: a versão 5. Com Bootstrap v5 produzir sites com design elegante e atrativo se tornou bem mais simples e fácil.

Para saber mais, acesse: https://getbootstrap.com/

Referências bibliográficas

Bootstrap. Documentação oficial. Disponível em https://getbootstrap.com/docs/5.1/getting-started/introduction/. Acesso em 31 de mar. de 2022.

MARIANO, D.; DE MELO-MINARDI, R. Introdução à Programação Web para Bioinformática: HTML, CSS, PHP and JavaScript. [s.l.] Independently Published, 2017.

---