{"id":608,"date":"2020-07-03T17:05:28","date_gmt":"2020-07-03T20:05:28","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=608"},"modified":"2022-12-09T08:34:43","modified_gmt":"2022-12-09T11:34:43","slug":"icones-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/icones-css\/","title":{"rendered":"\u00cdcones CSS"},"content":{"rendered":"

Como adicionar \u00edcones<\/p>\n

A maneira mais simples de adicionar um \u00edcone \u00e0 sua p\u00e1gina HTML \u00e9 com uma biblioteca de \u00edcones, como o Font Awesome.<\/p>\n

Adicione o nome da classe de \u00edcone especificada a qualquer elemento HTML embutido (como <i><\/code>ou <span><\/code>).<\/p>\n

Todos os \u00edcones nas bibliotecas de \u00edcones abaixo s\u00e3o vetores escalon\u00e1veis \u200b\u200bque podem ser personalizados com CSS (tamanho, cor, sombra etc.)<\/p>\n

 <\/p>\n

\u00cdcones impressionantes de fontes<\/strong><\/p>\n

Para usar os \u00edcones Fontes impressionantes, acesse https:\/\/fontawesome.com<\/a> , entre e obtenha um c\u00f3digo para adicionar na <head><\/code>se\u00e7\u00e3o da sua p\u00e1gina HTML:<\/p>\n

<script src=\"https:\/\/kit.fontawesome.com\/yourcode.js\"><\/script><\/code><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>Font Awesome Icons<\/title>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<script src=\"https:\/\/kit.fontawesome.com\/a076d05399.js\"><\/script>\r\n<!--Get your own code at fontawesome.com-->\r\n<\/head>\r\n<body>\r\n\r\n<p>Some Font Awesome icons:<\/p>\r\n<i class=\"fas fa-cloud\"><\/i>\r\n<i class=\"fas fa-heart\"><\/i>\r\n<i class=\"fas fa-car\"><\/i>\r\n<i class=\"fas fa-file\"><\/i>\r\n<i class=\"fas fa-bars\"><\/i>\r\n\r\n<p>Styled Font Awesome icons (size and color):<\/p>\r\n<i class=\"fas fa-cloud\" style=\"font-size:24px;\"><\/i>\r\n<i class=\"fas fa-cloud\" style=\"font-size:36px;\"><\/i>\r\n<i class=\"fas fa-cloud\" style=\"font-size:48px;color:red;\"><\/i>\r\n<i class=\"fas fa-cloud\" style=\"font-size:60px;color:lightblue;\"><\/i>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
\"\"<\/p>\n
 <\/p>\n
\u00cdcones de inicializa\u00e7\u00e3o<\/strong><\/p>\n
Para usar os glyphicons do Bootstrap, adicione a seguinte linha dentro da <head>se\u00e7\u00e3o da sua p\u00e1gina HTML:<\/p>\n
<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\"><\/code><\/p>\n
Nota: N\u00e3o \u00e9 necess\u00e1rio fazer download ou instala\u00e7\u00e3o!<\/span><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\">\r\n<\/head>\r\n<body>\r\n\r\n<i class=\"glyphicon glyphicon-cloud\"><\/i>\r\n<i class=\"glyphicon glyphicon-remove\"><\/i>\r\n<i class=\"glyphicon glyphicon-user\"><\/i>\r\n<i class=\"glyphicon glyphicon-envelope\"><\/i>\r\n<i class=\"glyphicon glyphicon-thumbs-up\"><\/i>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n


<\/center>\n
\"\"<\/p>\n
 <\/p>\n
\u00cdcones do Google<\/strong><\/p>\n
Para usar os \u00edcones do Google, adicione a seguinte linha dentro da <head>se\u00e7\u00e3o da sua p\u00e1gina HTML:<\/p>\n
<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\"><\/code><\/p>\n
Nota: N\u00e3o \u00e9 necess\u00e1rio fazer download ou instala\u00e7\u00e3o!<\/span><\/p>\n
\"\"<\/p>\n
 <\/p>\n
 <\/p>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n