Um dos kits auxiliares que quebram um galhão pelo que oferecem com um baixo custo / tamanho citamos o FontAwesome.
O FontAwesome é um conjunto de recursos como fontes de letras, ícones diversos como os de rede sociais e nada impede que você insira algo que lhe interessar no conjunto.
Esse 'kit' permite utilizar símbolos e ícones com recursos interessantes como automaticamente mudar o ícone dependendo da cor de fundo e da cor da frente de uma div onde o 'ícone' esta sendo inserido ou mesmo o tamanho já que a maioria dos ítens são SVGs redimensionáveis.
O 'kit' inteiro tem menos de 18 Megas mas jamais será baixado todo o kit para o cliente, apenas o que for utilizado pela página e isto reduz o download para ordem de 30 kb em média.
Se quiser ver os icones básicos do fontAwesome Clique aqui e poderá acrescentá-los ao seu projeto conforme desejar.
Alguns sites da Internet disponibilizam pacotes com mais ícones e recursos para o fontAwesome que você pode incorporar ao seu projeto como Clique aqui. E olha que são muitos, o mais dificil é achar o ícone que você deseja do que usar ele.
Você pode baixar e enviar o FontAwesome ao seu site ou utilizar em seu site a cdn apontando para o fontAwesome do site.
O ponto ruim de usar a cdn é que o site de destino pode mudar ou mesmo um recurso ser atualizado e seu site não irá mais obter
o recurso que precisa para funcionar. Se o seu site é de produção de uma empresa é praticamente obrigatório baixar e utilizar
o recurso localmente como garantia de funcionamento por longo tempo.
Se você baixou o fontAwesome e deszipou ele para o seu site vai encontrar as seguintes pastas:
1-/css : Contém os estilos das fontes web. O principal arquivo é o all.css.
2-/js : Contém os JavaScripts para que os SVGS do kit funcionem. O principal arquivo é o all.js.
3-/less : é o pré-processador less. É o 'mago' que customiza os recursos para que sejam exibidos corretamente em sua página ( como disse acima, cor de frente e fundo, tamanho, etc.). O principal arquivo é o fontawesome.less.
4-/scss : É o processador scss que ajuda nosso 'mago' acima (less) com as tarefas de customização da css.
5-/sprites : São os conjuntos de caracteres ou simbolos que podemos usar. Ficam na pasta sprites e são compostos por 3 arquivos - brands.svg, regular.svg,solid.svg. Cada um deles tem um conjunto de itens relacionados. Por exemplo, brands tem os ícones das redes sociais. Ao utilizar o fontAwesome veremos que essas 'bibliotecas' de sprites para serem usadas incluimos a primeira letra delas, por exemplo : fb = sprite de brands, fr = sprite regular ou fs = sprite.solid.
6-svgs : São os ícones ou recursos em sí no formato svg. Isto é uma garantia que sejam exibidos com perfeição em qualquer site.
7-webfonts : são as fontes de letra ou de recursos utilizados pelo Sprites/SVGs/CSS. São compostos por 3 arquivos : .svg para os 'ícones e fontes', .ttf para as fontes de letras, .eot que é um map dos itens dentro dos arquivos .svg e .eot. Note que estes itens são dimensionáveis dinâmicamente conforme onde serão inseridos.
Nota : Alguns recursos usam automaticamente outros recursos. É o caso das css e dos webfonts. Se você retirar um deles o outro irá parar de funcionar. Aconselho sempre a testar o conjunto inteiro e, se funcionar, retirar o que acha que deve ser retirado e repetir o teste. Se não impactar, pode retirar, senão, volte o bicho. E muito cuidado com o cache do browser, ele é cheio de pregar peças na gente.
Infelizmente você estará sempre apontando para uma versão do FontAwesome. Nos exemplos abaixo estaremos apontando para a versão 5.10.0 mas você deverá apontar para qual desejar. Cuidado com as versões. Já tive recursos funcionando numa versão que ao atualizar para uma mais nova param de funcionar. Verifique sempre se houve impacto no seu site antes de substituir uma versão definitivamente.
Alguns recursos são acessados em conjunto e outros separadamente.
Consulte o google e procure por 'fontawesome cdn' e verá as versões das cdns do fontawesome.
Tenha certeza que o link utilizado é da mesma versão da utilizada em sua página ou enviado ao seu servidor senão não irá funcionar.
CDN para os estilos (css/all.css):
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
Baixei o pacote e enviei ao servidor. Coloquei na pasta FontAwesomeEngine.
O link local para os estilos (css/all.css):
<link rel="stylesheet" href="../FontAwesomeEngine/css/all.css">
Basta baixar a biblioteca, enviar ao servidor ou usar o cdn e criar uma página com os seguintes recursos :
Para os recursos abaixo funcionarem basta acrescentar o link para fontawesome/css/all.css.
Código:
<i class="fas fa-user"></i> <!-- uses solid style -->
<i class="far fa-user"></i> <!-- uses regular style -->
<i class="fal fa-user"></i> <!-- uses light style -->
<i class="fab fa-github-square"></i> <!-- uses brands style -->
Como vocês podem observar nos itens acima a classe class="fa indica font awesome e a letra seguinte a biblioteca:
• s para solid
• r para regular
• l para light. Note que light-style não existe na minha biblioteca e por esse motivo é exibido um quadrado indicando a falta
do recurso mas não é um erro, só uma falha.
• b para brands.
Abaixo utilizei o mesmo código acima só que coloquei as tags i dentro de uma tag div com font-size de 25 px e color=blue.
O fontAwesome mudou o tamanho e a cor de acordo com o container da tag automaticamente.