{"id":1337,"date":"2020-09-24T19:48:20","date_gmt":"2020-09-25T00:48:20","guid":{"rendered":"https:\/\/soltuin.com\/?p=1337"},"modified":"2020-09-24T21:09:21","modified_gmt":"2020-09-25T02:09:21","slug":"como-usar-font-awesome-en-divi","status":"publish","type":"post","link":"https:\/\/soltuin.com\/es\/wordpress-web\/como-usar-font-awesome-en-divi\/","title":{"rendered":"\u00bfC\u00f3mo usar Font Awesome en Divi?"},"content":{"rendered":"

Hoy te voy a mostrar c\u00f3mo usar Font Awesome en Divi, espec\u00edficamente reemplazando los iconos del m\u00f3dulo Blurb.<\/p>\n

Font Awesome es una librer\u00eda muy popular en muchos sitios web que actualmente est\u00e1 en la versi\u00f3n 5 y est\u00e1n trabajando en la versi\u00f3n 6. Si bien hay muchas opciones para estilizar cada \u00edcono, por ahora solo te mostrar\u00e9 como incluir Font Awesome en Divi y adem\u00e1s como reemplazar los iconos de m\u00f3dulo Blurb por un \u00edcono de Font Awesome!<\/p>\n

Paso 1: Agrega Font Awesome a tu sitio web<\/h2>\n

A partir de Font Awesome 5, deberas crear una cuenta en Font Awesome<\/a>.<\/p>\n

<\/p>\n

Despu\u00e9s de creada tu cuenta, en la p\u00e1gina de Font Awesome encontraras unos Font Awesome Kits. Es una manera de administrar los diferentes kits de iconos. No veremos el detalle de ello as\u00ed que solo copia el kit que es creado para ti por defecto en el bot\u00f3n Copy Kit Code<\/strong> y agr\u00e9galo en el <head> de tu html.<\/p>\n

En Divi, agregar c\u00f3digo en el <head> de tu html lo puedes hacer f\u00e1cilmente desde el men\u00fa Divi -> Theme Options -> Integration<\/strong> y luego pon el c\u00f3digo en la caja de texto que dice “Add code to the <head> of your blog”<\/p>\n

Dale click en “Save Changes” para que se guarden tus cambios.<\/p>\n

<script src=\"https:\/\/kit.fontawesome.com\/<AquiVaelCodigoDeTuKit.js\" crossorigin=\"anonymous\"><\/script><\/strong><\/code><\/pre>\n
Paso 2: Modificar el m\u00f3dulo Blurb para mostrar un \u00edcono<\/h2>\n
Configura el uso de \u00edcono en el m\u00f3dulo Blurb<\/h3>\n
Visita la p\u00e1gina donde est\u00e1 el blurb que deseas editar y configura el uso de \u00edcono y selecciona un \u00edcono. El \u00edcono que elijas no importa, pero debe haber uno seleccionado o no se agrega el \u00edcono al m\u00f3dulo.<\/p>\n
<\/p>\n
Define el tama\u00f1o del \u00edcono en 0<\/h3>\n
Define el tama\u00f1o del \u00edcono en 0 utilizando Font Size.<\/p>\n
<\/p>\n
Agrega tu clase CSS al m\u00f3dulo blurb<\/h3>\n
Agrega una Clase CSS al m\u00f3dulo para que la uses en el siguiente paso. En este ejemplo puse una clase llamada pr-fa-desem<\/strong><\/p>\n
<\/p>\n
Paso 3: Agrega el \u00edcono que deseas<\/h2>\n
Ahora deber\u00e1s agregar el CSS como sigue y reemplazar el valor de “content” por el Unicode del \u00edcono que te interesa. Este link tiene todos los iconos para que escojas el que te gusta: https:\/\/fontawesome.com\/cheatsheet<\/a><\/p>\n
En este ejemplo estoy usando un \u00edcono de reciclaje cuyo c\u00f3digo Unicode es f1b8<\/strong><\/p>\n
<\/p>\n
\r\n.pr-fa-desem .et-pb-icon::after {\r\n  content: \"\\f1b8\";\r\n  font-family: \"FontAwesome\" !important;\r\n  font-size: 48px !important;\r\n}\r\n<\/code><\/pre>\n
Conclusi\u00f3n<\/h2>\n
Espero que haya sido de utilidad las instrucciones para utilizar iconos Font Awesome en los blurb de Divi.<\/p>\n","protected":false},"excerpt":{"rendered":"
Hoy te voy a mostrar c\u00f3mo usar Font Awesome en Divi, espec\u00edficamente reemplazando los iconos del m\u00f3dulo Blurb. Font Awesome es una librer\u00eda muy popular en muchos sitios web que actualmente est\u00e1 en la versi\u00f3n 5 y est\u00e1n trabajando en la versi\u00f3n 6. Si bien hay muchas opciones para estilizar cada \u00edcono, por ahora solo […]<\/p>\n","protected":false},"author":2,"featured_media":1356,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[24],"tags":[32],"class_list":["post-1337","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-web","tag-divi-es"],"_links":{"self":[{"href":"https:\/\/soltuin.com\/es\/wp-json\/wp\/v2\/posts\/1337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/soltuin.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/soltuin.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/soltuin.com\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/soltuin.com\/es\/wp-json\/wp\/v2\/comments?post=1337"}],"version-history":[{"count":0,"href":"https:\/\/soltuin.com\/es\/wp-json\/wp\/v2\/posts\/1337\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/soltuin.com\/es\/wp-json\/wp\/v2\/media\/1356"}],"wp:attachment":[{"href":"https:\/\/soltuin.com\/es\/wp-json\/wp\/v2\/media?parent=1337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/soltuin.com\/es\/wp-json\/wp\/v2\/categories?post=1337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/soltuin.com\/es\/wp-json\/wp\/v2\/tags?post=1337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}