Avisos
Vaciar todo

[Resuelto] cambiar viñetas por icono  

Página 1 / 2
 
Juan Angel
 Juan Angel
Usuario experto

Hola, quiero cambiar las viñetas clásicas de wordpress (de los tres puntos) por un icono de FontAwesome en todos los post publicados, mediante código con el plugin Code Snippets... la cuestión es que el siguiente código que estoy utilizando (más abajo) lo único que hace es borrar los tres puntos, los íconos no aparecen (y el mismo código lo he probado en un subdominio y funciona)... no estoy seguro que la parte del código: entry-content sea correcta. Gracias por la ayuda.

 
add_action( 'wp_head', function () { ?>
<style>
 
 
/* LISTA DESORDENDA - peengler.com */
.entry-content ul {
    list-style-type:none;
    margin:0!important;
    padding:0!important;
}
.entry-content ul li::before {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f058"; /* ICONO DE LA LISTA */
    margin-right: 8px;
    color: #eb6b15; /* COLOR DEL ICONO */
    font-size: 20px; /* TAMAÑO DEL ICONO DE LA LISTA */
    margin-left: -16px; /* MARGEN IZQUIERDO */
}
.entry-content ul li {
    padding: 0px 0px 0px 30px!important; /* CAMBIAR EL MARGEN */
}
/* FIN DE LA LISTA DESORDENDA - peengler.com */
 
</style>
<?php } );
 

Contenido solo visible a usuarios registrados

Respondido : 09/09/2023 9:20 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Juan,

Puedes enviarnos la url para ver donde están estos tres puntos que comentas, de forma general estás agregando el icono aquí:

 content: "\f058"; /* ICONO DE LA LISTA */

pero como te comento compártenos la url para poder verificar más a detalle.

Un saludo 

Respondido : 09/09/2023 11:17 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Juan Angel
 Juan Angel
Usuario experto

Hola, aquí está el link, podrás ver los tres puntos al principio del artículo: https://escuelaclaridad.com.ar/el-sendero-del-servicio/

Y te adjunto imagen para que veas cómo funciona en el subdominio.

iconos viñeta

 

Respondido : 10/09/2023 1:25 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Juan,

no lo veo igual a como nos lo estás mostrando:

image

Sin embargo, verifica agregar este CSS:

li::marker {
content: "👉";
background: lightgray;
border-radius: 1ch;
padding-inline: 1ch;
margin-inline-end: 1ch;
}

cambiará los puntos que te comparto por esas manitos.

Un saludo 🖐️ 

Respondido : 10/09/2023 2:25 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Juan Angel
 Juan Angel
Usuario experto

Sigo viendo los tres puntos... ¿cuál sería entonces el código para usar FontAwesome? y así aprovechar los diferentes íconos disponibles (para reemplazar las viñetas).

Respondido : 10/09/2023 3:25 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Juan,

Si sigues viendo los puntos agregale un !important al final de cada uno.

li::marker {
content: "fa-solid fa-font-awesome" !important;
background: lightgray !important;
border-radius: 1ch !important;
padding-inline: 1ch !important;
margin-inline-end: 1ch !important;
}

Si sigue sin mostrarse tendrias que hablar con soporte de tu tema, Pinnacle Premium, que posiblemente no permita este cambio a nivel de javascript.

Un saludo 🖐️ 

Respondido : 10/09/2023 6:28 pm

Cursos Gratuitos WordPress

Juan Angel
 Juan Angel
Usuario experto

Bueno, tuve que escribirle al soporte del Tema 🙂 veremos que me dice. Gracias.

Respondido : 11/09/2023 1:33 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Juan Angel.

Ok dejo el hilo abierto por si necesitas retomarlo.

 

Un saludo

Respondido : 11/09/2023 2:12 pm

Juan Angel
 Juan Angel
Usuario experto

@pepesoler

Hola, desde el soporte del Tema me sugirieron instalar el plugin FontAwesome... lo he instalado y he conseguido añadir una viñeta diferente para un documento (un post), y en color naranja con el siguiente código:

[nombre del icono="circle-check" prefix="fas" style="color: #ff6d1f"]

Mi consulta ahora es entonces: ¿cuál es el fragmento de código que debo aplicar en el plugin "Code Snippets" que me permita reemplazar las viñetas en todas las publicaciones (post)?

Gracias.

Respondido : 13/09/2023 12:53 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Juan Angel.

Supongo que cuando te refieres a viñetas es lo que te marco:

screenshot escuelaclaridad.com.ar 2023.09.13 15 35 12

Puedes utilizar el siguiente código CSS:

.entry-content ::marker {
content: "\f058";
font-family: "FontAwesome";
color: #ff6d1f;
}

 

Puedes añadir el icono que necesites solo modificando " content: "\f058" " por el valor del icono que quieres mostrar.

El código lo puedes añadir en Apariencia -> Personalizar -> CSS Adicional.

 

En este enlace tienes un listado de iconos:

-> https://fontawesome.com/search?o=r&m=free&s=solid&f=classic%2Csharp

Selecciona el icono que quieres añadir y en la parte superior verás el unicode de ese icono:

screenshot fontawesome.com 2023.09.13 16 02 00

 

Un Saludo

 

Respondido : 13/09/2023 3:05 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Juan Angel
 Juan Angel
Usuario experto

@pepesoler Hola, la buena noticia es que aparece el nuevo ícono, y reemplazando las viñetas de los puntos (clásicos de wordpress)... lo otro es que también aparece el ícono adelante de cada ítem del menú de navegación de la web 🙂 es ecir, en otros lugares diferentes al cuerpo central de texto del post... este es el fragmento de código que estoy utilizando (con el plugin Code Snippets): 

add_action('wp_head', 'reemplazar_vinetas_con_iconos');
 
function reemplazar_vinetas_con_iconos() {
    ?>
    <style>
        /* Estilo para las nuevas viñetas con iconos */
        ul {
            list-style-type: none; /* Elimina las viñetas clásicas */
        }
 
        ul li:before {
            content: "\f058";
font-family: "FontAwesome";
color: #ff6d1f;
        }
    </style>
    <?php
}

 

Respondido : 13/09/2023 4:58 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Juan Angel, 

Puedes enviarnos la URL donde aparecen las viñetas que deseas modificar para revisar con mayor detalle, ten en cuenta que el código que añades aplica al sitio en general por lo que los cambios se aplicaran en todo el sitio donde en el código tengas una lista <ul>.

Un Saludo

Respondido : 13/09/2023 5:29 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Juan Angel
 Juan Angel
Usuario experto

Este es uno de ellos: https://escuelaclaridad.com.ar/el-sendero-del-servicio/

Respondido : 13/09/2023 5:36 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Juan Angel, 

En este caso puedes probar aplicarlo únicamente a los artículos por ejemplo

/* Estilo para las nuevas viñetas con iconos */


.single-article ul li {
list-style: none;
}

.single-article ul li:before {
content: "\f058";
font-family: "FontAwesome";
color: #ff6d1f;
}

Ten en cuenta como te comento los estilos que agregues van a ser generales por lo que es importante añadir una clase única que permita aplicarlo a puntos específicos. 

Un Saludo 

 
Respondido : 13/09/2023 5:57 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Juan Angel
 Juan Angel
Usuario experto

@karen Si, eso es lo que quería, aplicar un único ícono para reemplazar las viñetas clásicas, el código ha funcionado perfecto! Muchas Gracias!!

Respondido : 13/09/2023 7:09 pm
Página 1 / 2