Bootstrap Icons: Uma Alternativa Eficiente ao Font Awesome para Bloggers (tutorial completo + Imagens)

Bootstrap| Utilizando ícones no blogger 

Bootstrap Icons é uma biblioteca de ícones SVG de código aberto, desenvolvida pela equipe do Bootstrap. 

Com mais de 2.000 ícones de alta qualidade, ela oferece uma vasta gama de opções para desenvolvedores e designers que buscam enriquecer visualmente seus projetos.

• Uma das principais vantagens do Bootstrap Icons em relação ao Font Awesome é a sua flexibilidade.

 Os ícones podem ser utilizados independentemente do framework Bootstrap, permitindo que sejam facilmente integrados em qualquer site ou aplicativo, incluindo blogs. 

Isso é particularmente útil para bloggers que desejam personalizar seus sites sem a necessidade de carregar todo o framework Bootstrap.

Além disso, o Bootstrap Icons é leve e otimizado para desempenho, o que pode resultar em tempos de carregamento mais rápidos para páginas da web.

 A biblioteca também é constantemente atualizada, garantindo que os usuários tenham acesso aos ícones mais recentes e relevantes.

Para bloggers que procuram uma alternativa eficiente e moderna ao Font Awesome, o Bootstrap Icons oferece uma solução robusta e fácil de implementar, melhorando a estética e a funcionalidade de seus sites.

Certo agora que já apresentamos uma introdução ao Bootstrap e por que ele é mais recomendado para o blogger|Blogspot, vamos conferir um tutorial passo a passo de como adicionar esse ícones as postagens do nosso blogger. 

1-Primeiro passo 

Abra seu navegador e vá até o seguinte site [link: 

https://icons.getbootstrap.com/]

Será o seguinte site da imagem abaixo: 

Ok se você já conseguiu se conectar ao site verifique se é o mesmo da imagem acima se estiver tudo certo vamos ao próximo passo.

2- Segundo Passo 

Agora verifique que ao lado esquerdo da página existe uma barra de pesquisa 🔍

Click nessa barra e selecione o nome do item que quer buscar um ícone , confira na imagem: 

3- Terceiro Passo

Na barra de pesquisa busque o nome do ícone no nosso tutorial vamos usar o ícone do YouTube.

4- Quarto Passo

Após ter decidido pelo ícone ao qual quer usar ele devera aparecer na lista , no caso do YouTube por ser mais específico só irá aparecer um ícone porém dependendo do item poderão aparecer mais.

Click sob ícone desejado, após isso se abrirá uma nova página , confira na imagem abaixo: 

5-Quinto Passo

Após ter aberto a nova página , o Bootstrap vai nos dar alguns exemplos básicos de como podemos utilizar os ícones nos nossos projetos e aplicações , porém vamos de leve aqui primeiro vamos aprender a utilização dos ícones em modo solitário sem encherto de códigos junto a eles.

Note que ao lado direito tem uma aba onde diz "Copiar HTML" 

Copie todo os código que aparece, e agora vamos implementar em nosso blogger.

Abra o seu blogger , crie uma nova página ou postagem conforme você deseja , com sua postagem ainda em branco ( para testar ) vá até o editor HTML no canto esquerdo superior 

6- Sexto Passo 

Agora cole o código cópiado no site do Bootstrap no editor HTML da sua página será algo parecido a isto: 

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
  <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"/>
</svg>.

Após ter copiado click no visualizador de postagem e verifique como ficou 

Confira na imagem abaixo :

7- Sétimo Passo 

Pronto agora já você já sabe como implementar ícones Bootstrap no seu blogger|Blogspot 

Porém caso queira aumentar o tamanho do ícone siga com essas instruções 

Vá até o código Bootstrap no editor de HTML e busque a seguinte linha de código 

height="16" viewbox="0 0 16 16" width="16"

Confira na imagem abaixo:

Após ter localizado a linha correspondente ao tamanho do ícone altere para o tamanho desejado no meu caso alterei para 

height="70" viewbox="0 0 16 16" width="70"

Confira na imagem abaixo como fica com os valores alterados.

Agora nosso ícone aparece com tamanho bem maior.

Pronto agora você pode começar a utilização dos ícones em suas postagens e também desenvolver suas próprias aplicações com os ícones dependo da sua nessecidade.

Gostou do nosso tutorial , então não deixe de comentar caso fique alguma dúvida...