BOOTSTRAP ICONS

Prévia do material em texto

Í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:  
É 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: 
<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> 
BOOTSTRAP ICONS 
Você sabia que seu material didático é interativo e multimídia? Isso signi�ca 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 �cam desabilitados. Por essa razão, �que atento: sempre
que possível, opte pela versão digital. Bons estudos! 
https://icons.getbootstrap.com/icons/house-door/
https://conteudo.colaboraread.com.br/202101/INTERATIVAS_2_0/DESENVOLVIMENTO_WEB/U2/S3/assets/img/Imagem1.png
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:  
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
<img src="[NOME-ICONE].svg" width="[largura]" height="[altura]">
<img  width="50px" height="50px" src="icons/book.svg">
https://github.com/twbs/icons/releases/latest/
https://icons.getbootstrap.com/
https://getbootstrap.com.br/docs/4.1/getting-started/introduction/