wakls211_u2s3_des_web

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.
• EExxeemmpplloo bbáássiiccoo: 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
<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> 
BBOOOOTTSSTTRRAAPP
IICCOONNSS
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://conteudo.colaboraread.com.br/202101/INTERATIVAS_2_0/DESENVOLVIMENTO_WEB/U2/S3/assets/img/Imagem1.png
https://conteudo.colaboraread.com.br/202101/INTERATIVAS_2_0/DESENVOLVIMENTO_WEB/U2/S3/assets/img/Imagem1.png
Bootstrap icons, escolher o ícone desejado e inseri-lo usando o código informado na página.
• OOuuttrroo eexxeemmpplloo: 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:
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. 
• MMaaiiss uumm eexxeemmpplloo: 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://icons.getbootstrap.com/icons/house-door/
https://icons.getbootstrap.com/icons/house-door/
https://icons.getbootstrap.com/icons/house-door/
https://icons.getbootstrap.com/icons/house-door/
https://github.com/twbs/icons/releases/latest/
https://github.com/twbs/icons/releases/latest/
https://icons.getbootstrap.com/
https://icons.getbootstrap.com/
https://getbootstrap.com.br/docs/4.1/getting-started/introduction/
https://getbootstrap.com.br/docs/4.1/getting-started/introduction/
https://getbootstrap.com.br/docs/4.1/getting-started/introduction/
https://getbootstrap.com.br/docs/4.1/getting-started/introduction/
https://conteudo.colaboraread.com.br/202101/INTERATIVAS_2_0/DESENVOLVIMENTO_WEB/U2/S3/index.html#
https://conteudo.colaboraread.com.br/202101/INTERATIVAS_2_0/DESENVOLVIMENTO_WEB/U2/S3/index.html#