BOOTSTRAP ICONS

Você sabia que seu material didático é interativo e multimídia? Isso significa que você pode interagir com o conteúdo de diversas formas, a
qualquer hora e lugar. Na versão impressa, porém, alguns conteúdos interativos ficam desabilitados. Por essa razão, fique atento: sempre
que possível, opte pela versão digital. Bons estudos!

Ícones são essenciais para construção de sites com interface amigável. Recentemente, Bootstrap lançou sua
própria biblioteca de ícones para auxiliar desenvolvedores.

Veja alguns exemplos de ícones:

Ícones Bootstrap

Fonte: captura de tela do software Bootstrap elaborada pelo autor.

Exemplo básico: para inserir o ícone > utilize o código a seguir:

<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20

20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><patch fill-
rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0
01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"/></svg>

É claro que a inserção de ícones com códigos assim pode ser um pouco complexa. Você pode acessar a página do
Bootstrap icons, escolher o ícone desejado e inseri-lo usando o código informado na página.

Outro exemplo: o código para inserção do ícone encontra-se neste

https://icons.getbootstrap.com/icons/house-door/.

A maneira mais simples é: fazer o download dos arquivos SVG e, depois, inseri-los como imagens:
 <img src="[NOME-ICONE].svg" width="[largura]" height="[altura]">

Você pode baixá-la manualmente em: https://github.com/twbs/icons/releases/latest/

Vamos precisar dos arquivos presentes na pasta “icons”.

Copie a pasta e cole no mesmo diretório que o seu site.

Mais um exemplo: Para inserir o ícone (“book.svg”), digite a pasta seguida do nome do arquivo
desejado:

<img width="50px" height="50px" src="icons/book.svg">

Uma lista com vários nomes de ícones pode ser encontrada no link disponível em: https://icons.getbootstrap.com/

Além disso, você pode encontrar na página disponível em: https://getbootstrap.com.br/docs/4.1/getting-

started/introduction/. Nela você terá o passo a passo para introduzir a ferramenta Bootstrap.

Pesquise mais