Desenvolvimento Web

Tutorial Simple line icons, belos ícones para o seu site.

por |Publicado

Recentemente publicamos aqui no blog da inVettor um tutorial super legal do FONT AWESOME, confira.

Tutorial de como usar os ícones do FONT AWESOME

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.

  1. Inicie um novo documento HTML.
  2. 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">
  3. Agora crie alguns elementos HTML, neste exemplo, vamos criar um botão. 
    <button>Botão com ícone</button>
  4. 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.
  5. 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
  6. Vamos aplicar a classe em um elemento <SPAN>, ficando; 
    <button><span class="icon-user"></span> Botão com ícone</button>
  7. 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>

 

You may also like