Recentemente publicamos aqui no blog da inVettor um tutorial super legal do FONT AWESOME, confira.
Mas hoje vamos falar do Simple line icons, um pacote de ícones leves e bem bonitos para acrescentar em seu site.
Como colocar o Simple line icons no seu site.
- Inicie um novo documento HTML.
- Acrescente no head do documento o código
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
- Agora crie alguns elementos HTML, neste exemplo, vamos criar um botão.
<button>Botão com ícone</button>
- Agora vamos escolher um ícone para o botão, para isso, acesse o site Simple line icons e escolha um dos ícones disponíveis, marque o nome do ícone escolhido. Por exemplo, vamos escolher o ícone com o nome de user.
- Agora, que sabemos o nome do ícone escolhido, basta chamarmos o ícone dentro de uma classe com o prefixo icon-, então, o nome da classe ficará icon-user
- Vamos aplicar a classe em um elemento <SPAN>, ficando;
<button><span class="icon-user"></span> Botão com ícone</button>
- O resultado será esse:
Exemplo completo com BootStrap e Simple Line Icons.
Preparamos um exemplo completo para você usando o BootStrap e o Simple Line Icons.
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Starter Template</title> <!-- Bootstrap --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- simple line icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css"> </head> <body> <div class="container" style="text-align="> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"> <form> <div class="form-group"></div> <label><span class="icon-user"></span> Usuário</label> <input type="text" class="form-control"> <div class="form-group"></div> <label><span class="icon-lock"></span> Senha</label> <input type="password" class="form-control"> <div class="form-group"></div> <button class="btn btn-success"><span class="icon-login"></span> Login</button> </form> </div> <div class="col-md-4"></div> </div> </div> <!-- /.container --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
