Dinky UI CSS

# Uso

Nesta etapa iremos apresentar as opções que você pode optar para usar icones em seus projetos

Font Awesome

A primeira opção para usar icones é a Font Awesome, você pode acessar o site para ler sobre ele ou visualizar os icones disponíveis clicando aqui.
Para usá-lo, basta importar no cabeçalho do seu HTML o Font Awesome da seguinte forma:


<!DOCTYPE html>
<html lang="pt-br">
<head>
  ...
  <!-- importando font awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
  ...
</head>
<body>
  ...
</body>
</html>

Caso não funcione, acesse a documentação clicando aqui e veja como adicionar por CDN.
Com o Font Awesome importado, está na hora de testar. Acesse a galeria de icones clicando aqui procure o icone que você deseja importar e use da seguinte forma. Veja um exemplo:


<i class="fas fa-home"></i>

Bem simples, basta adicionar uma classe que inicie sempre com fas seguido do icone que você pode obter na galeria do Font Awesome que normalmente começa com fa-*.

Cor

Para alterar a cor é da mesma forma quando queremos alterar a cor de um texto, inicia uma nova classe com t- em seguida o nome da cor que deseja. Veja:


<i class="fas fa-home t-red"></i>

Tamanho

Para aumentar ou diminuir um icone, você pode criar novas classe CSS ou fazer diretamente no elemento alterando o font-size. Veja um exemplo:


<i class="fas fa-home" style="font-size: 40px"></i>

Material Design

Outra opção para usar icones é a Material Design, você pode acessar o site para ler sobre ele ou visualizar os icones disponíveis clicando aqui.
Para usá-lo, basta importar no cabeçalho do seu HTML o Font Awesome da seguinte forma:


<!DOCTYPE html>
<html lang="pt-br">
<head>
  ...
  <!-- importando material design -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  ...
</head>
<body>
  ...
</body>
</html>

Caso não funcione, acesse a documentação clicando aqui e veja como adicionar via google fonts.
Com o Material Design importado, está na hora de testar. Acesse a galeria de icones clicando aqui procure o icone que você deseja importar e use da seguinte forma. Veja um exemplo:


<i class="material-icons">favorite</i>

Bem simples, basta adicionar a classe material-icons e entre as tags de abertura do elemento i adicione o nome do icone.

Cor

Para alterar a cor é da mesma forma quando queremos alterar a cor de um texto, inicia uma nova classe com t- em seguida o nome da cor que deseja. Veja:


<i class="material-icons t-blue">favorite</i>

Tamanho

Para aumentar ou diminuir um icone, você pode criar novas classe CSS ou fazer diretamente no elemento alterando o font-size. Veja um exemplo:


<i class="material-icons" style="font-size:40px">favorite</i>