Cómo personalizar íconos en los títulos de tu web

eruizr82 · 26 Abr 2023

Hola,
Alguien sabe como se agregan iconos (como el que aparece al lado del texto Calorías totales) supongo que con CSS, si alguien tuviera un tutorial o video.

Gracias.

produpromo · 26 Abr 2023

eruizr82 dijo:
Hola,
Alguien sabe como se agregan iconos (como el que aparece al lado del texto Calorías totales) supongo que con CSS, si alguien tuviera un tutorial o video.

Gracias.
Ver el archivo adjunto 1004978

te refieres que al buscar un articulo, en Google salga ese icono?, ó mostrar simplemente en la web?

eruizr82 · 26 Abr 2023

produpromo dijo:
te refieres que al buscar un articulo, en Google salga ese icono?, ó mostrar simplemente en la web?

Mostrar simplemente en la web.

Gregh · 26 Abr 2023

eruizr82 dijo:
Mostrar simplemente en la web.

Prueba copiandolo y pegalo en tu titulo...

YoGeekOnline · 26 Abr 2023

Se hace con https://fontawesome.com/icons

Tiene un plugin para wordpress si no quiere liarte mucho. Ya luego solo pegas el codigo que es simple y que puedes sacar de su sitio web.
Con propiedades de tamaño y color si también lo deseas.

eruizr82 · 26 Abr 2023

YoGeekOnline dijo:
Se hace con https://fontawesome.com/icons

Tiene un plugin para wordpress si no quiere liarte mucho. Ya luego solo pegas el codigo que es simple y que puedes sacar de su sitio web.
Con propiedades de tamaño y color si también lo deseas.

Vale, muchas gracias lo voy a revisar.

Manuel Escalona · 26 Abr 2023

Debes tener en cuenta que a veces muchos iconos no están disponibles para mostrarse en el titulo en la SERP, sin embargo, se muestran en el titulo una vez entras a la web.
También hay otros emojis que si se muestran en la SERP, debes averiguar cuales son esos en caso de que quieras que aparezcan allí.

Puko · 26 Abr 2023

Puede ser ...
una imagen
un icono svg
un icono con fontawesome
un icono unicode
o un 'emoji'
Lo puedes ver dandole click derecho en el navegador > inspeccionar

Se lo agregas en el div/h, etc
y tambien con css con la propiedad 'content' ... por ejemplo:

classOid:before {
content: "\1F60D";
}

Cómo personalizar íconos en los títulos de tu web

eruizr82

produpromo

eruizr82

Gregh

YoGeekOnline

eruizr82

Manuel Escalona

Puko

Temas similares