CSS Ícones
Ícones Incríveis de
Fonte
acesse fontawesome.com
<script
src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
Na prática:
<!DOCTYPE html>
<html>
<head>
<title>Ícones com
fontes incríveis</title>
<meta
name="viewport" content="width=device-width,
initial-scale=1">
<script
src="https://kit.fontawesome.com/a076d05399.js"
crossorigin="anonymous"></script>
<!--Para obter
fontes accesse fontawesome.com-->
</head>
<body>
<h1>Biblioteca
de ícones Font Awesome</h1>
<p>Alguns
ícones de fontes impressionantes:</p>
<i class="fas
fa-cloud"></i>
<i class="fas
fa-heart"></i>
<i class="fas
fa-car"></i>
<i class="fas
fa-file"></i>
<i class="fas
fa-bars"></i>
<p>Ícones impressionantes
da fonte estilizada (tamanho e cor):</p>
<i class="fas
fa-cloud" style="font-size:24px;"></i>
<i class="fas
fa-cloud" style="font-size:36px;"></i>
<i class="fas
fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fas
fa-cloud" style="font-size:60px; color:lightblue;"></i>
</body>
</html>
Ícones do Bootstrap
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Na prática:
<!DOCTYPE html>
<html>
<head>
<title> Ícones Bootstrap
</title>
<meta
name="viewport" content="width=device-width,
initial-scale=1">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body
class="container">
<h1>Biblioteca de
ícones do Bootstrap</h1>
<p>Alguns ícones do
Bootstrap:</p>
<i
class="glyphicon glyphicon-cloud"></i>
<i
class="glyphicon glyphicon-remove"></i>
<i
class="glyphicon glyphicon-user"></i>
<i
class="glyphicon glyphicon-envelope"></i>
<i
class="glyphicon glyphicon-thumbs-up"></i>
<br><br>
<p>Ícones
estilizados do Bootstrap (tamanho e cor):</p>
<i
class="glyphicon glyphicon-cloud"
style="font-size:24px;"></i>
<i
class="glyphicon glyphicon-cloud"
style="font-size:36px;"></i>
<i
class="glyphicon glyphicon-cloud"
style="font-size:48px;color:red;"></i>
<i
class="glyphicon glyphicon-cloud"
style="font-size:60px;color:lightblue;"></i>
</body>
</html>
Ícones do Google
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!DOCTYPE html>
<html>
<head>
<title>Ícones Google </title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h1>Biblioteca de ícones do Google</h1>
<p>Alguns ícones do Google:</p>
<i class="material-icons">cloud</i>
<i
class="material-icons">favorite</i>
<i
class="material-icons">attachment</i>
<i
class="material-icons">computer</i>
<i class="material-icons">traffic</i>
<br><br>
<p>Ícones estilizados do Google (tamanho e
cor):</p>
<i class="material-icons"
style="font-size:24px;">cloud</i>
<i class="material-icons"
style="font-size:36px;">cloud</i>
<i class="material-icons"
style="font-size:48px;color:red;">cloud</i>
<i class="material-icons"
style="font-size:60px;color:lightblue;">cloud</i>
</body>
</html>