Article image
Karine Almeida
Karine Almeida09/04/2022 13:48
Compartilhe

Inserir icons a partir do Bootstrap

  • #HTML
  • #Bootstrap

Fala galera, tudo bom?

Vou ensinar aqui, uma forma bem tranquila de inserir ícones por HTML no seu projeto.

Vale lembrar que essa é apenas uma forma, em meio a muuitas outras, de executar essa ação.

A fonte de ícones que usarei é o Bootstrap. Sendo assim:

  1. Entre no site da Bootstrap e acesse a aba Icons;
  2. Lá você encontrará um quantidade enorme de ícones e você pode até filtrar para encontrar apenas os ícones do seu interesse. Ex.: calendar;
  3. Click no ícone desejado;
  4. Observe que no lado direito da página, há uma opção chamada Copy HTML;
  5. Copie o código de lá e insira no seu projeto (que deve estar em HTML);
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-activity" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z"/>
</svg>

E prontinho! O ícone aparecerá no seu projeto. Espero ter te ajudado :)

Eu sei que parece ser um código bem grande, mas até o momento foi o que eu achei mais tranquilo, pois não preciso fazer download de pasta de ícones e etc.
Caso tu saibas de outras formas interessantes de inserir icons e quiser compartilhar vou gostar muito de aprender tbm. Um abração!
Compartilhe
Comentários (1)
Daniele Severiano
Daniele Severiano - 09/04/2022 21:08

É sempre bom sabermos novas formas de incluir ícones em nossas páginas. Muito obrigada pela contribuição, Karine!