{"id":1458,"date":"2020-02-18T20:01:24","date_gmt":"2020-02-18T23:01:24","guid":{"rendered":"https:\/\/www.souzahost.com\/tutoriais\/?p=1458"},"modified":"2021-06-02T07:55:15","modified_gmt":"2021-06-02T10:55:15","slug":"fontawesome-o-que-e-como-instalar","status":"publish","type":"post","link":"https:\/\/www.holahost.com.br\/tutoriais\/fontawesome-o-que-e-como-instalar\/","title":{"rendered":"FontAwesome: O que \u00e9? Como instalar?"},"content":{"rendered":"\n

Existem v\u00e1rias maneiras de exibir \u00edcones<\/strong> em seu site<\/strong>. As mais comuns s\u00e3o atrav\u00e9s da utiliza\u00e7\u00e3o de imagens ou \u00edcones.svg<\/code>. Por\u00e9m, estes m\u00e9todos nem sempre representam a solu\u00e7\u00e3o mais adequada. Pra isso, criaram fontes compostas exclusivamente de \u00edcones como o FontAwesome<\/a>. Ele funciona como uma fonte, por\u00e9m, ao inv\u00e9s de letras, existem \u00edcones.<\/p>\n\n\n\n

Isso permite que voc\u00ea altere cores, tamanhos, planos de fundo e realize qualquer personaliza\u00e7\u00e3o poss\u00edvel com um texto plano. Pra instalar, siga os passos:<\/p>\n\n\n\n

  1. Acesse o site: fontawesome.io<\/a><\/li>
  2. Clique em Download<\/strong> e em No Thanks, just download FontAwesome.<\/strong><\/li>
  3. Depois, extraia e copie todas pastas presentes no arquivo.zip<\/strong> (scss, less, fonts e css) para a pasta do seu site.<\/li>
  4. Entre as tags <head><\/code> do seu site, adicione o seguinte c\u00f3digo:<\/li><\/ol>\n\n\n\n
    <link<\/strong> rel=<\/strong>\"stylesheet\" href=<\/strong>\"css\/font-awesome.min.css\"><\/strong> <\/pre>\n\n\n\n
     Pronto! O FontAwesome <\/strong>j\u00e1 est\u00e1 preparado para o seu site. Agora \u00e9 s\u00f3 adicionar os \u00edcones. Para fazer isso, copie o c\u00f3digo do \u00edcone que deseja utilizar diretamente na p\u00e1gina de exemplos<\/a> e o aplique da seguinte maneira: <\/p>\n\n\n\n
    <i<\/strong> class=<\/strong>\"fa fa-bus\"><\/i><\/strong> <\/pre>\n\n\n\n
     Vale lembrar que o tamanho e o estilo do \u00edcone \u00e9 definido pelo elemento que cont\u00e9m a tag I. Ou seja, se eu criar uma div e definir um tamanho de fonte de 50px dentro dela, o tamanho do \u00edcone ser\u00e1 esse. Voc\u00ea tamb\u00e9m pode adicionar uma classe personalizada para definir o estilo do seu \u00edcone, por exemplo: <\/p>\n\n\n\n
    <style><\/strong>\n  .icone{\n    font-size:50px;\n    color:red;\n    margin-left:30px;\n  }\n<\/style><\/strong>\n<i<\/strong> class=<\/strong>\"fa fa-bus icone\"><\/i><\/strong> <\/pre>\n\n\n\n
    Voc\u00ea tamb\u00e9m pode usar um CDN<\/strong>, basta adicionar o c\u00f3digo de incorpora\u00e7\u00e3o na se\u00e7\u00e3o <head><\/code> das suas p\u00e1ginas. Atualmente, a Font Awesome \u00e9 distribu\u00eddo atrav\u00e9s de dois CDN de elevada qualidade (MaxCDN <\/strong>e CloudFare<\/strong>). Escolha um do servi\u00e7o que pretende usar nas suas p\u00e1ginas: <\/p>\n\n\n\n
     <link rel=\"stylesheet\" href=\"http:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.4.0\/css\/font-awesome.min.css\"><\/em> <\/pre>\n\n\n\n
    \n\n\n\n
     <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.4.0\/css\/font-awesome.min.css\"><\/em> <\/pre>\n\n\n\n
     Caso tenha alguma d\u00favida, deixe o seu coment\u00e1rio. <\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
    Existem v\u00e1rias maneiras de exibir \u00edcones em seu site. As mais comuns s\u00e3o atrav\u00e9s da utiliza\u00e7\u00e3o de imagens ou \u00edcones.svg. Por\u00e9m, estes m\u00e9todos nem sempre representam a solu\u00e7\u00e3o mais adequada. Pra isso, criaram fontes compostas exclusivamente de \u00edcones como o FontAwesome. Ele funciona como uma fonte, por\u00e9m, ao inv\u00e9s de letras, existem \u00edcones. Isso permite que voc\u00ea altere cores, […]<\/p>\n","protected":false},"author":1,"featured_media":5516,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[94],"tags":[100,101,102],"_links":{"self":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/1458"}],"collection":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/comments?post=1458"}],"version-history":[{"count":2,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/1458\/revisions"}],"predecessor-version":[{"id":5517,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/1458\/revisions\/5517"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/media\/5516"}],"wp:attachment":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/media?parent=1458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/categories?post=1458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/tags?post=1458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}